*{
    margin:0;
    padding:0;
    font-family: "Instrument Sans",Arial;
    box-sizing: border-box;
}

body{
    background-color: #eff2fc;
    overflow-x: hidden;
}


#section-5-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #eff2fc;
    padding: 50px 0px;
}

#section-5-context {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 50px;
    color: rgb(194, 193, 193);
}

#section-5-context::before {
    content: '💠';
}

#section-5-tagline {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 600;
    max-width: 1000px;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px;
}

#section-5-card-container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

/* BASE: all cards */
.section-5-card {
    flex-shrink: 1;           /* allows cards to shrink as viewport narrows */
    min-width: 30%;             /* overrides the 380px min-width so shrinking works */
    min-height: 500px;
    width: calc(100% / 5);   /* distribute evenly across all 5 cards */
    border-radius: 20px;
    margin: 20px 8px;
}

.section-5-empty-card {
    background-color: #eff2fc;
}

.section-5-text-card {
    background-color: white;
    width: 30%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

#section-5-img-card-1 {
    background-image: url('../ASSETS/Homepage/section-5-family.jpg');
    background-size: cover;
    background-position: center;
}

#section-5-img-card-2 {
    background-image: url('../ASSETS/Homepage/section-5-camera-1.jpg');
    background-size: cover;
    background-position: center;
}

#section-5-img-card-3 {
    background-image: url('../ASSETS/Homepage/section-5-camera-2.jpg');
    background-size: cover;
    background-position: center;
}

.section-5-svg {
    height: 90px;
    width: auto;
    background-color: #007faf;
    margin: 30px;
    padding: 13px;
    border-radius: 50%;
    border: 12px solid #dfeff5;
}

.section-5-text-card-headline {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 600;
    margin: 30px;
}

.section-5-text-card-para-text {
    font-size: clamp(14px, 1.5vw, 16px);
    text-align: justify;
    font-weight: 700;
    margin: 30px;
    color: rgb(103, 103, 103);
}

/* BELOW 1000px — hide empty cards, make img & text cards square and centered */
@media (max-width: 900px) {
    .section-5-empty-card {
        display: none;
    }

    #section-5-card-container {
        flex-direction: column;
        align-items: center;
    }

    .section-5-card {
        min-width: 0;
        min-height: 0;
        width: min(80vw, 480px);
        height: min(80vw, 480px);
        margin: 15px auto;
        border-radius: 20px;
    }

    .section-5-text-card {
        max-width: min(80vw, 480px);
        width: min(80vw, 480px);
        height: min(80vw, 480px);
        justify-content: center;
    }
}

/* MOBILE — tighten spacing and sizing */
@media (max-width: 480px) {
    #section-5-main-container {
        padding: 30px 0;
    }

    .section-5-card {
        width: 90vw;
        height: 90vw;
    }

    .section-5-text-card {
        width: 90vw;
        height: 90vw;
        max-width: 90vw;
    }

    .section-5-svg {
        height: 50px;
        margin: 20px;
        padding: 5px;
        border-width: 8px;
    }

    .section-5-text-card-headline {
        margin: 20px;
    }

    .section-5-text-card-para-text {
        margin: 20px;
        font-size: 13px;
    }
}