/* XS - PHONE PORTRAINT:  < 576px */

@media (min-width: 544px) {
    /* 530px / 16px = 34rem */
    /* 34rem x 16px = 544px */

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }

    .hero-heading-break {
        display: none;
    }

    .hero-section {
        height: auto;
    }

    .features-grid-container {
        grid-template-columns: 1fr;
    }

    .feature-img-swap-order {
        grid-row: auto;
        grid-column: auto; 
    }

    .cta-card {
        padding: 8rem 6rem;
    }
}

/* SM - PHONE LANDSCAPE: 576px - 768px */

@media (min-width: 688px) {
    /* 680px / 16px = 43rem */
    /* 43rem x 16px = 688px */

    html {
        font-size: 50%;
        /* 8px / 16px = 50% */
    }

    .cta-card {
        padding: 8rem 16rem;
    }

    .features-grid-container {
        row-gap: 5rem;
        column-gap: 0.5rem;
    }

    .reviews-grid-container{
        grid-template-columns: 1fr 1fr;
    }

}


/* MD - TABLETS: 768px - 1024px */

@media (min-width: 816px) {
    /* 815px / 16px = 51rem */
    /* 51rem x 16px = 816px */

    html {
        font-size: 56.25%;
        /* 9px / 16px = 56.25% */
    }

    .proof-flex-row {
        flex-direction: row; 
        gap: 5rem;
        align-items: initial;
        justify-content: center;
     }
    
    .proof-ted-bio-text {
        flex: 0 0 60%; /* Text takes up the remaining space */
    }

    .proof-ted-profile-card {
        flex: 0 0 30%; /* This is your 1/3 ratio */
        max-width: 28rem; /* Keeps it from getting too big on Desktop */
    }
    .proof-flex-row .proof-img.narrow {
        flex: 0 0 40%; /* Image takes up 40% of the row width */
    }

    .proof-img.narrow img{
        width: 90%; 
    }

    .features-row, .features-row.reverse {
        flex-direction: row;
        text-align: center;
        gap: 4rem;
        align-items:center;
    }

    /* This flips the layout for the "reverse" class */
    .features-row.reverse {
        flex-direction: row-reverse;
    }

    .features-image {
        flex: 0 0 40%;       /* Image stays exactly 40% of the row */
    }

    .search_built-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 images side-by-side */
    }
    
    .search_built-item img {
        max-width: 100%; /* Let them fill the grid columns on desktop */
    }
}

/* LG - SMALL LAPTOPS: 1024px - 1280px */

@media (min-width: 1152px) {
    /* 1150px / 16px = 72rem */
    /* 72rem x 16px = 1152px */

    html {
        font-size: 62.5%;
        /* 10px / 16px = 62.5% */
    }

    .features-grid-container {
        column-gap: 2rem;
    }

    .cta-section {
        margin-bottom: 8rem;
    }
}