/* ─── AULA PIC ─── */
.aulas-picture-container {
    position: relative;
    /*min-height: 72vh;*/
    background-color: var(--graycool1000); /* fallback */
    overflow: hidden;
}

.aulas-picture-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64%; /* adjust how tall the fade is */
    background: linear-gradient(to bottom, transparent, var(--graycool1000) 90%);
    z-index: 0;
    pointer-events: none;
}

.aulas-picture-content {
    position: relative; /* lifts it above the img */
    z-index: 1;
}

.aulas-picture-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
}

@media only screen and (min-width: 600px) {
    .aulas-picture-background {
        width: auto;
        left: auto;
        right: 8rem;
    }
}
/* ───────────────────────── */









/* ─── TRAINER PIC ─── */
.trainer-picture-container {
    position: relative;
    /*min-height: 72vh;*/
    background-color: var(--graycool1000); /* fallback */
    overflow: hidden;
}

.trainer-picture-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64%; /* adjust how tall the fade is */
    background: linear-gradient(to bottom, transparent, var(--graycool1000) 90%);
    z-index: 0;
    pointer-events: none;
}

.trainer-picture-content {
    position: relative; /* lifts it above the img */
    z-index: 1;
}

.trainer-picture-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
}

@media only screen and (min-width: 600px) {
    .trainer-picture-background {
        width: auto;
        left: auto;
        right: 8rem;
    }
}
/* ───────────────────────── */










/* ─── SOBRE PIC ─── */
.sobre-picture-container {
    position: relative;
    /*min-height: 72vh;*/
    background-color: var(--graycool1000); /* fallback */
    overflow: hidden;
}

.sobre-picture-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64%; /* adjust how tall the fade is */
    background: linear-gradient(to bottom, transparent, var(--graycool1000) 90%);
    z-index: 0;
    pointer-events: none;
}

.sobre-picture-content {
    position: relative; /* lifts it above the img */
    z-index: 1;
}

.sobre-picture-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
}

@media only screen and (min-width: 600px) {
    .sobre-picture-background {
        width: auto;
        left: auto;
        right: 8rem;
    }
}
/* ───────────────────────── */