/* ----- Grey Container  ------------------------------------------- */

:root {
    --unsdg-padding: 1px;
    --bg-color: #FFECD5;
}

/* -----  Irregular grid helpers ------------------------------------------- */


.irr-banner {
    position: relative;
    width: 100%; height: 100%;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.no-pad {
    padding: 0;
}
.irr-banner .block {
    aspect-ratio:1/1;
    width: 100%;
}
.irr-banner .block.rect {
    aspect-ratio:2/1.5;
    width: 100%;
}
.irr-banner img.irr-absolute {
    position: absolute;
    transform: translateY(-30%);
}
.irr-banner img.full-width {
    width: 100%;
}
.irr-banner .text-box {
    position: relative;
    width: 100%;
    z-index: 1;
}
.irr-banner .frame {
    position: absolute;
    width: 100%; height: 100%;
    border: 1px solid var(--color-purple-high);
    z-index: 9;
}
.irr-banner .frame.expand {
    width: 120%; 
    top:0;
    transform: translateX(-8.5%);
    z-index: -1;
}

.irr-banner.inspo {
    flex-direction: column;
}


.irr-banner.inspo .frame {
    z-index: 1;
    top:1em;
    height: calc(100% - 4em);
    transform: translateX(1.2em);
}
.irr-banner-bg {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; z-index: 0;
}

/** Banner colour **/

.irr-banner-bg.cyan {
    background: #6BBAA3;
}
.irr-banner-bg.cyan-light {
    background: #87D1BC;
}
.irr-banner-bg.pale {
    background: #F4F0F0;
}
.irr-banner-bg.milk {
    background: #FBEDE0;
}
/** Banner text **/
.irr-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 1.1em;
    line-height: 130%;
}
.irr-text.white {
    color: white
}
.irr-text .font-alt {
    font-size: 1.5em;
    line-height: 120%;
    margin-top: 10px;
    margin-bottom: 15px;
}

.move-TL {
    transform: translate(-10px, -10px);
}
.move-TR {
    transform: translate(10px, -10px);
}
.irr-banner .article-text {
    padding: 0 0 30px 0 !important;
}
@media all and (min-width: 768px) {
    .irr-banner .text-box {
        width: 90%;
    } 
    .irr-banner .article-text {
        padding: 0 5% 30px !important;
    }
}
@media all and (min-width: 992px) {
    .irr-banner .article-text {
        padding: 10% !important;
    }
    .irr-banner.inspo .main-ttl {
        padding-top: 0.8em;
    }
}

/* -----  Customs ------------------------------------------- */

.human-milk .image-overlay {
    width: 55%;
}

.climate-tech .image-overlay {
    width: 45%;
    z-index: 1;
    pointer-events: none;
}
.climate-tech .irr-text  {
    padding-top: 15px;
}
.oscar-fund .inno-banner .irr-text  {
    display: block;
}
.oscar-fund .inno-banner .article-text  {
    padding: 30px 15px;
}
.oscar-fund .impact-segment .irr-text  {
    font-size: 1.2em;
}
.oscar-fund .impact-segment .font-alt  {
    font-size: 1.6em;
}
@media all and (min-width: 1200px) {
    .oscar-fund .inno-banner .article-text  {
        padding: 40px 10px;
    }

    .oscar-fund .inno-banner img  {
        width: 110%;
    }
    .oscar-fund .inno-banner img.moveTL  {
        transform: translate(-80px, 0px);
    }  
    .oscar-fund .inno-banner img.moveTR  {
        transform: translate(30px, -20px);
    }    
}
@media all and (min-width: 1400px) {
    .climate-tech .image-overlay {
        width: 35%;
    }
    .tf-scholarships .image-overlay {
        width: 35%;
    }    
}

/* -----  TF ------------------------------------------- */

.inno-holder {
    position: relative;
}
.inno-bg {
    position: absolute;
    width: 130%; height: 600%;
    transform: translate(-12%, 25px);
    background: #FBEDE0;
    z-index: 0;
}
.inno-bg-beige {
    position: absolute;
    width: 100%; height: 25px;
    transform: translate(-70%, -100%);
    z-index: 0;
    background: var(--color-beige);
}
.inno-menu {
    display: flex;
    flex-direction: row;
    column-gap: 4px;
    position: relative;
    z-index: 1;
    line-height: 130%;
    flex-basis: 1;
}
.inno-menu div {
    text-align: center;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background: var(--color-purple-light); 
    height: 200% !important;
}
.inno-menu div.active {
    background: var(--color-purple-high); 
    
}
.inno-menu div:hover {
    background: var(--color-purple-high); 
    cursor: pointer;
}
.inno-subttl {
    width: 100%; text-align: center;
    position: relative;
    z-index: 1;
}
.inno-content {
    position: relative;
    z-index: 1;
}
.inno-content .irr-text {
    text-align: left !important;
}
.inno-content .text-box {
    display: none;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}
.inno-img {
    aspect-ratio:16/9;
}
.inno-content .text-box img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.inno-content .text-box:first-of-type {
    display: flex;
}
.inno-text strong {
    color: var(--color-purple-high);
    font-weight: 400 !important;
    line-height: 120%;
}
.impact-box {
    display: none;
}
.impact-box.focus1 {
    display: block;
}
.impact-box .ratio_tall{
   aspect-ratio: 7/9;
}

@media all and (min-width: 768px) {
    .inno-menu {
        column-gap: 10px;
    }
    .inno-menu div {
        padding: 15px 35px;
    }
    .inno-img {
        aspect-ratio:12/9;
    }
    .inno-text {
        padding-right: 5%;
    }
    .inno-content .text-box {
        flex-direction: row;
        gap: 30px;
    }
    .impact-box .ratio_tall {
        aspect-ratio: 7/11.5;
    } 
    .impact-box .font-alt {
        transform: scale(0.85);
    } 

}
@media all and (min-width: 1400px) {
    .impact-box .ratio_tall {
        aspect-ratio: 7/10;
    } 
    .impact-box .font-alt {
        transform: scale(1);
    }
}

/** Oscar Fund **/

.inno-bg-milk {
    position: absolute;
    width: 70%; height: 100px;
    z-index: 0;
    transform: translate(0%, -100%);
    top:0; right:0;
    background: var(--color-milk);
}
.btn-video {
    position: absolute;
    z-index: 1;
    width:100%;
    right:0;
    height: 100%;
    padding: 20px;
}
.btn-video-block {
    border: 2px solid white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    flex-direction: column;
    text-transform: uppercase;
}
@media all and (min-width: 992px) {
     .btn-video {
        padding: 30px;
    }   
}
@media all and (min-width: 1200px) {
     .btn-video {
        width:45%;
        padding: 50px;
    }   
}

.interested-blurb {
    border: 1px solid var(--color-purple-high);
    padding: 20px 30px;
    border-radius: 30px;
}