/* =========================================
   GOVERNING PHILOSOPHY
   ========================================= */

.framework-gateway {
    padding: 5rem 1.5rem;
}

  .framework-container {
    width: min(1120px, 92%);
    margin-inline: auto;
}

.framework-gateway-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.25rem;
}

.framework-governance-gateway__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.framework-gateway-emerging-system__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.framework-gateway-card__media {
    aspect-ratio: 900 / 520;
    overflow: hidden;
}

.framework-gateway-card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.framework-gateway-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.framework-gateway-card__body {
    padding: 1.5rem;
}

.framework-gateway-card h3 {
    margin: 0.4rem 0 0.75rem;
}

.framework-gateway-card p {
    margin-bottom: 1.25rem;
}

/* Principle 05 */

.framework-gateway-card--wide .framework-gateway-card__media {
    aspect-ratio: 3 / 1;
}

.framework-gateway-card--wide {
    grid-column: 1 / -1;
    overflow: hidden;
    border-radius: 1.25rem;
}

.framework-gateway-card--wide .framework-gateway-card__media {
    overflow: hidden;
    border-radius: 1.25rem 1.25rem 0 0;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .framework-governance-gateway__grid {
        grid-template-columns: 1fr;
    }

    .framework-gateway-card--wide {
        grid-column: auto;
    }

    .framework-gateway-card--wide
    .framework-gateway-card__media {
        aspect-ratio: 900 / 520;
    }

}
.framework-governance-gateway-2__grid {
   display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
   
}


.cpogf-hero {
    position: relative;
    min-height: min(720px, 78vh);
    overflow: hidden;
    isolation: isolate;
    background: #080d16;
}

.cpogf-hero__banner {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.cpogf-hero__slide {
    position: relative;

    width: 100%;
    height: 100%;
}

.cpogf-hero__slide picture {
    display: block;

    width: 100%;
    height: 100%;
}

.cpogf-hero__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.cpogf-hero__content {
    position: relative;
    z-index: 2;

    width: min(1120px, 92%);
    min-height: min(720px, 78vh);

    margin-inline: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 80px 0;

    pointer-events: auto;
}





@media (max-width: 900px) {

    .framework-gateway__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .framework-gateway__grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 900px) {

    .framework-gateway-emerging-system__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .framework-gateway-emerging-system__grid {
        grid-template-columns: 1fr;
    }

}