/* =========================================================
   RESULTS SECTION
========================================================= */

.result-section {
    width: 100%;

    padding-top: 80px;
    padding-bottom: 80px;

    box-sizing: border-box;
}


/* =========================================================
   RESULTS CONTAINER
========================================================= */

.result-container {
    display: grid;

    grid-template-rows: auto auto;

    gap: 80px;
}


/* =========================================================
   TOP AREA
========================================================= */

.result-top {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: start;

    min-width: 0;
}


/* =========================================================
   HEADING
========================================================= */

.result-topic {

    box-sizing: border-box;
}

.result-topic h2 {
    margin: 0;
    padding-top: 10px;
    max-width: 500px;
    font-weight: 600;
    letter-spacing: 0;

    color: #111;
}


/* =========================================================
   RESULT CARDS
========================================================= */
.result-cards-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    box-sizing: border-box;
}

/* =========================================================
   CARD
========================================================= */

.result-cards-grid .card {
    min-width: 0;

    padding: 25px 30px;

    box-sizing: border-box;

    border-left: 1px solid #e5e5e5;
}


/* First column */

.result-cards-grid .card:nth-child(3n + 1) {
    border-left: none;
}


/* Second row */

.result-cards-grid .card:nth-child(n + 4) {
    border-top: 1px solid #e5e5e5;
}


/* =========================================================
   CARD NUMBER
========================================================= */
.result-cards-grid .card h3 {
    margin: 0 0 25px;
    font-size: 72px;
    font-weight: 600;
    background: radial-gradient(84.02% 84.02% at 50% 15.98%, #0C6AA5 0%, #021927 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   CARD TEXT
========================================================= */

.result-cards-grid .card p {
    margin: 0;
    max-width: 270px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;

    line-height: 1.35;

    color: #555;
}


/* =========================================================
   PHOTO GRID
========================================================= */

.result-photo-grid {
    display: grid;

    grid-template-columns: 2fr 1.1fr 1fr;

    gap: 40px;

    min-width: 0;
}


/* =========================================================
   PHOTO
========================================================= */

.photo-card {
    width: 100%;

    height: 360px;

    overflow: hidden;

    border-radius: 12px;
}


.photo-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .result-section {
        padding-top: 65px;
        padding-bottom: 80px;
    }

    .result-container {
        gap: 65px;
    }


    /* Heading */

    .result-topic h2 {
        font-size: 42px;
    }


    /* Cards */

    .result-cards-grid {
        grid-template-rows: repeat(2, minmax(190px, auto));
    }

    .result-cards-grid .card {
        padding: 20px;
    }

    .result-cards-grid .card h3 {
        font-size: 44px;
        margin-bottom: 20px;
    }




    /* Photos */

    .result-photo-grid {
        gap: 25px;
    }

    .photo-card {
        height: 320px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .result-section {
        padding-top: 55px;
        padding-bottom: 70px;
    }

    .result-container {
        gap: 55px;
    }


    /* Stack heading and cards */

    .result-top {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .result-topic {
        padding: 0;
    }


    .result-topic h2 {
        max-width: 600px;

        font-size: 40px;
    }


    /* Cards */

    .result-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        grid-template-rows: repeat(2, minmax(180px, auto));
    }

    .result-cards-grid .card {
        padding: 20px;
    }

    .result-cards-grid .card h3 {
        font-size: 38px;

        margin-bottom: 16px;
    }



    /* Photos */

    .result-photo-grid {
        gap: 15px;
    }

    .photo-card {
        height: 250px;
    }
}


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

@media (max-width: 600px) {

    .result-section {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .result-container {
        gap: 45px;
    }


    /* Heading */

    .result-top {
        display: block;
    }

    .result-topic {
        margin-bottom: 35px;

        padding: 0;
    }

    .result-topic h2 {
        max-width: 100%;

        font-size: 32px;

        line-height: 1.15;
    }


    /* Cards */

    .result-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;
    }


    .result-cards-grid .card {
        padding: 20px 15px;
    }


    /* Reset desktop border rules */

    .result-cards-grid .card:nth-child(3n + 1) {
        border-left: 1px solid #e5e5e5;
    }


    /* Left column */

    .result-cards-grid .card:nth-child(odd) {
        border-left: none;
    }


    /* Second row */

    .result-cards-grid .card:nth-child(n + 3) {
        border-top: 1px solid #e5e5e5;
    }


    /* Numbers */

    .result-cards-grid .card h3 {
        margin-bottom: 15px;

        font-size: 32px;
    }


    /* Text */

    .result-cards-grid .card p {
        max-width: 100%;


    }


    /* Photos */

    .result-photo-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .photo-card {
        height: 280px;
    }
}


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

@media (max-width: 400px) {

    .result-topic h2 {
        font-size: 28px;
    }


    .result-cards-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));

        grid-template-rows: auto;
    }

    .result-cards-grid .card {
        padding: 16px 12px;
        border: 0 !important;
    }

    .result-cards-grid .card h3 {
        font-size: 28px;
    }



    .photo-card {
        height: 230px;
    }
}