/* Views padding (the views wrapper) might not need this if the theme template already has this.  */
 .external-media-releases {
    margin: 0 2em;
}

/* Cards wrapper store all the cards.  Set card minmax width */
.cards--media-release {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(334px, 1fr));
    max-width: 87.5em;
    margin: 2em auto;
    grid-gap: 2em;
}

/* Card wrapper/container.  Make this wrapper a container and assigned a name "card-grid" for better theming based on container width. */
.card--media-release {
    display:grid;
    grid-template-columns: 3fr 4fr;
    background-color: #E2EEF9;
    container: card-grid / inline-size;   
    align-content: start;
    max-width: 700px;
}

.card--media-release > * { /* apply 2 span on the grid to all card elements */
    grid-column: span 2;
}

.card--media-release img { /* set image to full width */
    display:block;
    width:100%;
    height: auto;
}

.card--media-release > :not(.views-field-field-media-release-image) { /* set padding for all card children element except imnage element */
    padding: 0em 1.05rem;
}
.card--media-release > :not(.views-field-title, .views-field-field-media-release-image){ /* set margin for all card children element except imnage element */
 //   margin:0.5em 0;
}
.card--media-release .views-field-field-media-link {
    margin-bottom:1em;
}
.card h3 {
    margin-top:1.05rem;
    margin-bottom:1.05rem;
}
.card p {
    font-size: 1.125em;
}

/* View header margina and padding */

.external-media-releases .view-header {
    max-width: 87.500em;
    margin: 1em auto;
}

.external-media-releases header {
    max-width: 87.500em;
    margin: 1em auto;
}

/* Set full width on card to avoid from card overflow due to min-width of the card on a narrow width */
@media screen and (max-width: 560px){
    .cards--media-release {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Re-arrange card elements to two column when card container width is greater than or equal to 517px */
@container card-grid (width >= 517px){
    .views-field-field-media-release-image {
        grid-row: 1/8;
    }
    .views-field-field-media-release-image img {
        aspect-ratio: 4/5;
        object-fit: cover;
    }
    .card--media-release > * {
        grid-column: span 1;
    }
}