/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;

    width: 100%;

    padding: 100px 0;

    background-color: #000000;

    overflow: hidden;
}

.about-section__container {
    position: relative;

    width: 100%;
    min-height: 700px;
}

/* =========================================================
   IMAGE
========================================================= */

.about-section__image {
    position: relative;

    width: 78%;
    height: 700px;

    overflow: hidden;

    z-index: 1;
    padding: 70px;
}

.about-section__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* =========================================================
   BRAND
========================================================= */

.about-section__brand {
    position: absolute;

    left: 7%;
    bottom: 12%;

    z-index: 2;

    color: rgba(255, 255, 255, 0.9);

    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 600;

    line-height: 0.9;
    letter-spacing: -0.05em;

    white-space: nowrap;

    pointer-events: none;
}

/* =========================================================
   TEXT BOX
========================================================= */

.about-section__content {
    position: absolute;

    top: 50%;
    right: 5%;

    z-index: 3;

    width: min(42%, 580px);

    padding: 4rem;

    background-color: #d9d9d9;

    transform: translateY(-50%);
}

.about-section__title {
    margin: 0;

    color: #111111;

    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;

    line-height: 1.05;
}

.about-section__description {
    margin-top: 2rem;

    color: #222222;

    font-size: 1rem;

    line-height: 1.7;
}

.about-section__description p {
    margin: 0 0 1.25rem;
}

.about-section__description p:last-child {
    margin-bottom: 0;
}


@media (max-width: 768px) {

    .about-section {
        padding: 60px 0;
    }

    .about-section__container {
        min-height: auto;

        display: flex;
        flex-direction: column;
    }

    .about-section__image {
        width: 100%;
        height: 420px;
    }

    .about-section__content {
        position: relative;

        top: 70px;
        right: auto;

        width: calc(100% - 40px);

        margin: -60px auto 0;

        padding: 2.5rem 2rem;

        transform: none;
    }

    .about-section__title {
        font-size: 2.2rem;
    }

    .about-section__description {
        margin-top: 1.5rem;

        font-size: 0.95rem;
        line-height: 1.6;
    }

    .about-section__brand {
        left: 5%;
        bottom: 5%;

        font-size: clamp(2.5rem, 13vw, 5rem);
    }

}