/*Section Miniclub*/
.photo-tile-center {
    clip-path: inset(30px 0px 30px 0px);
    margin-top: -30%;
}

.right-photo {
    margin-top: 100px;
}

.text-area {
    margin-top: -280px;
    padding-top: 275px;
    z-index: -1;
}

.spacer {
    padding-bottom: 75px;
}

.bg-lightblue {
    background-color: #e3f5f5;
} 


/*CLUBS*/
.miniclub {
    background-image: url('/site/common/backgrounds/miniclubp-bg.webp');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 140%;
}

    .miniclub .text-area {
        background-color: #a286c0;
    }

.maxiclub {
    background-image: url('/site/common/backgrounds/maxiclubp-bg.webp');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 140%;
}

    .maxiclub .text-area {
        background-color: #f89679;
    }

.teenagerclub {
    background-image: url('/site/common/backgrounds/teenagerclubp-bg.webp');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 140%;
}

    .teenagerclub .text-area {
        background-color: #7da7d9;
    }

.minidisco {
    background-image: url('/site/common/backgrounds/minidiscop-bg.webp');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 140%;
}

    .minidisco .text-area {
        background-color: #f5999e;
    }


/*RESPONSIVE SETTINGS*/
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .miniclub,
    .maxiclub,
    .teenagerclub,
    .minidisco {
        background-size: 100%;
    }

    .text-area {
        margin-top: -280px;
        padding-top: 240px;
        z-index: -1;
    }

    .spacer {
        padding-bottom: 100px;
    }
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .text-area {
        margin-top: unset;
        padding-top: unset;
        z-index: 1;
    }

    .miniclub,
    .maxiclub,
    .teenagerclub,
    .minidisco {
        background-size: 70%;
    }

        .miniclub .text-area,
        .maxiclub .text-area,
        .teenagerclub .text-area,
        .minidisco .text-area {
            background-color: unset;
        }

        .miniclub .text-bg {
            background-color: #a286c0;
        }
        .maxiclub .text-bg {
            background-color: #f89679;
        }
        .teenagerclub .text-bg {
            background-color: #7da7d9;
        }
        .minidisco .text-bg {
            background-color: #f5999e;
        }

    .spacer {
        padding-bottom: 150px;
    }

}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .text-area {
        margin-top: 40px;
    }

    .miniclub,
    .maxiclub,
    .teenagerclub,
    .minidisco {
        background-size: 70%;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

    .text-area {
        margin-top: 90px;
    }

    .right-photo {
        margin-top: 130px;
    }

}