.containerXL {
    padding: 0;
}

.containerAll {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100dvh;
    background-color: var(--backgroundColor_backgroundColor);
}

.containerAll:has(.navigationBackground) {
    top: 50px;
    height: calc(100dvh - 50px);
}

.containerResponseXS, .containerResponseS, .containerResponseM, .containerResponseL, .containerResponseXL {
    display: flex;
    align-items: flex-start;
}

.containerResponseXS {
    gap: var(--marginXS);
    --gap: var(--marginXS);
}

.containerResponseS {
    gap: var(--marginS);
    --gap: var(--marginS);
}

.containerResponseM {
    gap: var(--marginM);
    --gap: var(--marginM);
}

.containerResponseL {
    gap: var(--marginL);
    --gap: var(--marginL);
}

.containerResponseXL {
    gap: var(--marginXL);
    --gap: var(--marginXL);
}

.containerResponseWrap {
    flex-wrap: wrap;
}

.containerResponseLeft {
    justify-content: flex-start;
}

.containerResponseCenter {
    justify-content: center;
}

.containerResponseRight {
    justify-content: flex-end;
}

@media (prefers-color-scheme: dark) {
    .containerAll {
        background-color: var(--backgroundColor_backgroundColorD);
    }
}

@media only screen and (max-width: 500px) {
    .containerXS {
        padding: 0 calc((100% - clamp(280px, 96%, 360px)) / 2);
    }

    .containerS {
        padding: 0 calc((100% - clamp(280px, 96%, 400px)) / 2);
    }

    .containerM {
        padding: 0 calc((100% - clamp(280px, 96%, 440px)) / 2);
    }

    .containerL {
        padding: 0 calc((100% - clamp(280px, 96%, 480px)) / 2);
    }
}

@media only screen and (min-width: 501px) and (max-width: 1000px) {
    .containerXS {
        padding: 0 calc((100% - clamp(360px, 90%, 500px)) / 2);
    }

    .containerS {
        padding: 0 calc((100% - clamp(400px, 92%, 740px)) / 2);
    }

    .containerM {
        padding: 0 calc((100% - clamp(440px, 94%, 880px)) / 2);
    }

    .containerL {
        padding: 0 calc((100% - clamp(480px, 96%, 920px)) / 2);
    }
}

@media only screen and (min-width: 1001px) {
    .containerXS {
        padding: 0 calc((100% - clamp(500px, 80%, 600px)) / 2);
    }

    .blockResponseContainer .containerXS {
        padding: 0 calc((100% - clamp(250px, 80%, 300px)) / 2);
    }

    .containerS {
        padding: 0 calc((100% - clamp(740px, 82%, 1000px)) / 2);
    }

    .blockResponseContainer .containerS {
        padding: 0 calc((100% - clamp(370px, 82%, 500px)) / 2);
    }

    .containerM {
        padding: 0 calc((100% - clamp(880px, 84%, 1100px)) / 2);
    }

    .blockResponseContainer .containerM {
        padding: 0 calc((100% - clamp(440px, 84%, 550px)) / 2);
    }

    .containerL {
        padding: 0 calc((100% - clamp(920px, 86%, 1200px)) / 2);
    }

    .blockResponseContainer .containerL {
        padding: 0 calc((100% - clamp(460px, 86%, 600px)) / 2);
    }
}