.hero-image-grid {
    margin:var(--sm) 0;
    
    @media(min-width:768px) {
        grid-template-columns: minmax(300px, 700px) minmax(300px, 700px);
    }

    img,picture{
        width: fit-content;
        max-width:100%;
        max-height: 460px;
        @media (min-width: 768px) {
            max-width: 100%;
        }
    }

    .button{
        @media(max-width:768px) {
            justify-self: center;
            align-self: center;
        }

        font-size:var(--xs);
    }
}

@media(min-width:768px) and (max-width:1300px){
    .hero-image-grid{
        gap:0 var(--md);
    .content{
        display:contents;
        *{
            grid-column: 1/2;
        }
    
        h1{
            grid-column: 1/3;
            text-align:center;
            margin-bottom:var(--md);
        }

        p{
            font-size:var(--xs);
        }
    }   picture,
        img.rounded, 
        .video-container {
            grid-column:2/3;
            grid-row:2/5;
        }
    }
}

.cloud-features{
    background: linear-gradient(90deg, #1db2fa2e 0%, #1db2fafc 30%, #1db2fafc 70%, #1db2fa2e 100%), var(--pattern), #0aa7f4;
    --pattern: url(/images/patterns/hexagons.svg);
    
    .icon-list-title{
        h2, h3, p{
            color:var(--white);
        }
        p{
            opacity: 0.8;
        }
        img {
            width: 70px;
            filter: invert(1) grayscale(1) drop-shadow(2px 2px 10px #4444dd47) brightness(1.3);
        }
    }

    .icon-and-text{
        h3{
            color:var(--white);
            font-size:var(--sm)
        }
        p{
            color:var(--white);
            opacity: 0.8;
            font-size:var(--xs);
        }
        .icon-and-text__icon {
            width: 40px;
            background: #1ab0f9;
            display: flex;
            aspect-ratio: 1;
            align-items: center;
            justify-content: center;
            border-radius: var(--rounded-md);
            grid-row: span 2;
            background: linear-gradient(136deg, #28a4e1 30.7%, #008accba 80.5%, #00080b00 98.98%), var(--pattern), #1ab0f9;
            box-shadow: 0px 0px 0px 2px #00daff inset;
        }
    }

    .icon-list-cta{
        display: grid;
        grid-template-columns: 1fr;
        transition: all 1s;
        gap: 1rem;
        margin: 0 auto;
        border: 2px solid #00daff;
        background: #0996d963;
        box-shadow: inset 0px 0px 12px 4px #0000000a, 0px 0px 12px 4px #0000000a;

        p{
            color:var(--white);
            font-size:var(--xs)
        }

        @media (min-width: 768px) {
            grid-template-columns: 1fr max-content;
        }
    }
}

.home-learn{
    .container{
        padding-bottom:var(--sm);
    }
    h2{
        padding:var(--md);
        margin-bottom: calc(var(--md) * -1)!important;
        position: relative;
        &:before{
            width: var(--md);
            position: absolute;
            opacity: 0.15;
            width: 190px;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            content: "";
            background: url(/images/hand-drawn/arrows.svg) no-repeat;
            width: 90px;
            height: 100px;

        }
    }

    .icon-and-text{
        h3{
            font-size:var(--sm);
        }
        p{
            font-size:var(--xs);
            color:var(--white);
            opacity: 0.8;
        }
    }

}

.meet-the-team{
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.125) 100%), linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%), url(/images/patterns/topography-2.svg), url(/images/patterns/about-bg.jpg) right no-repeat, #fff;
    .container{
        background: radial-gradient(#ffffff, #ffffff3d, #ffffff00);
    }
}