/* =========================
   Platforms Overview
========================== */

.platforms-overview{

    background-color:var(--clr-bg-light);

}

.alternating-grid{

    display:flex;
    flex-direction:column;
    gap:var(--space-4xl);

}

.platform-block{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:64px;

}

.platform-block__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

.platform-block--reverse .platform-block__image{

    order:2;

}

.platform-block--reverse .platform-block__content{

    order:1;

}

.alternating-grid__content h2{

    max-width:14ch;

}

.alternating-grid__content p{

    color:var(--clr-text-light);

    max-width:60ch;

}

.alternating-grid__image{

    border-radius:var(--radius-xl);

    overflow:hidden;

}

.alternating-grid__image img{

    width:60%;

    height:100%;

    display:block;

    object-fit:cover;

}

/* =========================
   Feature List
========================== */

.feature-list{

    display:grid;

    grid-template-columns:repeat(2,minmax(180px,1fr));

    gap:var(--space-md) var(--space-xl);

    margin-bottom:var(--space-lg);

    padding:0;

    list-style:none;

    margin-top: var(--space-md);

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:0.75rem;

    font-weight:500;

    color:var(--clr-text);

}

.feature-list li i{

    width:18px;

    height:18px;

    color:var(--clr-accent);

    flex-shrink:0;

}

/* =========================
   Spacing Between Sections
========================== */

.alternating-grid > *{

    margin-bottom:var(--space-3xl);

}

.alternating-grid > *:nth-last-child(-n+2){

    margin-bottom:0;

}

/* =========================
   Responsive
========================== */

@media (max-width: 992px){

    .alternating-grid{

        grid-template-columns:1fr;

        gap:var(--space-2xl);

    }

    .feature-list{

        grid-template-columns:1fr;

    }

    /* Keep image first on every block */

    .alternating-grid__image{

        order:1;

    }

    .alternating-grid__content{

        order:2;

    }

}