/* Avstand mellom kortene: ingen radavstand fra gridet, og margin-bottom (8 %) fra
   .featured-thumbnail og 2rem fra .layered-grid erstattes av én fast verdi. */
.grid.media-list {
    row-gap: 0;
}

.media-list__item.featured-thumbnail {
    margin-bottom: 0;
}

.media-list__item.featured-thumbnail .layered-grid {
    margin-bottom: 2.5rem;
}

/* Overskriften ligger øverst i innholdsboksen: halv avstand til toppen (desktop)
   og litt mer luft ned til teksten. */
.media-list .media-list__item.featured-thumbnail .layered-grid__content .lk-heading {
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 769px) {
    .media-list .media-list__item.featured-thumbnail .layered-grid__content {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
}

/* Avstand over innholdet i mobilvisning (innholdsboksen overlapper bildet).
   Selektoren må være mer spesifikk enn .site-library .featured-thumbnail .layered-grid__content
   i dist-CSS-en, som lastes etter denne filen. */
@media only screen and (max-width: 768px) {
    .media-list .media-list__item.featured-thumbnail .layered-grid__content {
        padding-top: 2.5em;
    }
}

/* Kortet bruker .layered-grid--secondary, som reserverer første rad (minst 80px + 1rem) og
   første kolonne til overskriftsboksen. Overskriften ligger nå i innholdsboksen, så rad 1 settes
   til 0, første kolonne fjernes, og bildet legges helt ut til kanten av kortet. */
.media-list__item .layered-grid--secondary {
    grid-template-columns: 2fr var(--ch-overlap--small) 3fr;
    grid-template-rows: 0 var(--ch-overlap--xxsmall) auto var(--ch-overlap--xxsmall);
}

.media-list__item .layered-grid--secondary .layered-grid__image {
    grid-row: 1 / -1;
}

@media only screen and (max-width: 1024px) {
    .media-list__item .layered-grid--secondary {
        grid-template-columns: 2fr var(--ch-overlap--medium) 3fr;
        grid-template-rows: 0 var(--ch-overlap--xxsmall) auto var(--ch-overlap--medium);
    }
}

@media only screen and (max-width: 768px) {
    .media-list__item .layered-grid--secondary {
        grid-template-columns: var(--ch-overlap--medium) auto repeat(2, var(--ch-overlap--medium));
        grid-template-rows: 0 var(--ch-overlap--small) auto var(--ch-overlap--small) auto;
    }

    .media-list__item .layered-grid--secondary .layered-grid__image {
        grid-column: 1 / span 3;
        grid-row: 1 / 5;
    }
}

@media only screen and (max-width: 480px) {
    .media-list__item .layered-grid--secondary {
        grid-template-columns: var(--ch-overlap--small) auto repeat(2, var(--ch-overlap--small));
    }
}

@media only screen and (max-width: 768px) {
    .media-list .media-list__item.featured-thumbnail .layered-grid__content .lk-heading {
        margin-bottom: 1rem;
    }
}

/* Under 480px legger dist-CSS-en på margin-top: -2em på innholdsboksen. Sammen med overlappet fra
   rutenettet (2rem) blir boksen trukket så langt opp at overskriften havner bak bildet. */
@media only screen and (max-width: 480px) {
    .media-list .media-list__item.featured-thumbnail .layered-grid__content {
        margin-top: 0;
    }
}