.single-page-template .section-wrapper:first-of-type {
    display: flex;
    align-items: center;
    background: var(--black);
    overflow: hidden;
    padding-bottom: calc(var(--vertical-section-padding) + 3rem);
    min-height: 55svh;
}

.single-page-template .projekt-hero .section-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
}

.single-page-template .sub-heading {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
    background: var(--light);
    padding: .7rem 1rem;
    letter-spacing: .1rem;    
}

.single-page-template .projekt-hero.section-wrapper .content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-medium);
    align-items: center;
    padding-bottom: 2vw;
}

.single-page-template .section-wrapper .content .text {
    width: 100%;
    max-width: 35rem;
}

.intro-img img {
    filter: brightness(.6);
    transform: scale(1);
    opacity: 0;

    /* viktigt */
    animation: intro-img 2s cubic-bezier(0.15, 0.28, 0, 1);
    animation-delay: .2s;
    animation-fill-mode: forwards;

    /* viktigt */
}

@keyframes intro-img {
    from {
        transform: scale(1.05);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.hero-title {
    opacity: 0;
    transform: translateY(5px);
    animation: fade-up-title 1s ease forwards;
    animation-delay: .85s;
    margin-left: 2rem;
}

@keyframes fade-up-title {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-text {
    opacity: 0;
    transform: translateY(6px);
    animation: fade-up-text 1s ease forwards;
    animation-delay: .5s;
    text-transform: uppercase;
}

@keyframes fade-up-text {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Project Meta */
.project-meta .content  {
  display: grid;
  grid-template-columns: 1fr 22rem;
  align-items: flex-start;
  column-gap: var(--spacing-large);
  row-gap: var(--spacing-large);
}

@media (max-width: 1280px) {
  .project-meta .content  {
  grid-template-columns: 1fr 21rem;
  column-gap: var(--spacing-medium);  
}
}

@media (max-width: 960px) {
  .project-meta .content  {
  grid-template-columns: 1fr;
}
}

.project-meta .key-metrics {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;    
}

.project-meta__item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--black-alpha-2);
    padding: .75rem 0;
}

.project-meta__item:first-child {
    padding: 1rem 0;
}

.project-meta__label {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--font-size-base);
    opacity: .8;
}

.project-meta__value {
    font-size: var(--font-size-tiny);
}

.project-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing-tiny);
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-small);
}

@media (max-width: 960px) {
  .project-gallery {
	grid-template-columns: 1fr 1fr;
}
}

.project-gallery a {
	display: block;	
	overflow: hidden;
}

.project-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .45s;
}

.project-gallery a:hover img {
	transform: scale(1.03);
}