/* CONCEPT */
/* --------------------- */
/* --------------------- */
/* --------------------- */
/* CSS FOR CONCEPT CONTAINER ------------------------------------------------------------------------------------------------ */
.concept-container {
    position: relative;
    padding: min(calc(10 * 1440px / 100), 10vw) 0vw;
    text-align: left;
    background-color: transparent;
    overflow: hidden;
}

.concept-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgb(255, 255, 255, 1)),
        url(../../images/concept-back.webp) no-repeat center center / cover;
    z-index: -1; 
}

.concept-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: min(calc(4 * 1440px / 100), 4vw);
}

.concept-info {
    max-width: min(80vw, 1200px);
    padding: 0 40px;
    padding-top: 0;
}

.concept-info h4 {
    justify-self: center;
    letter-spacing: 0.4em;
    font-weight: 400;
    font-size: clamp(20px, 2.15vw, 32px);
    padding-bottom: 25px;
    text-align: center;
}

.concept-text {
    text-align: center;
}

@media (max-width: 768px) {
    /* CONCEPT MOBILE */
    .concept-container {
        padding: 10vw 4vw;
    }

    .concept-info {
        padding: 0;
    }

    .concept-container h2 {
        /* font-size: var(--mobile-title-size); */
        text-align: center;
    }

    .concept-container h3 {
        padding-bottom: var(--mobile-padding);
    }

    .concept-cool-text h3 {
        font-size: 6vw;
    }

    .concept-info h4 {
        font-size: var(--mobile-subtitle-size);
        padding-bottom: 10px;
        letter-spacing: 0.2em;
    }

    .concept-content {
        /* gap: 50px; */
    }

    .concept-info {
        max-width: none;
    }

    .concept-text {
        font-size: var(--mobile-font-size);
    }
}