.ht-dyeing {
    --ht-red: #8C1D2C;
    --ht-gold: #B08D57;
    --ht-dark: #262422;
    --ht-body: #6F6A64;
    --ht-cream: #F7F5F2;
    --ht-border: #E4DED7;

    font-family: "Open Sans", Arial, sans-serif;

    background:
        var(--ht-cream);

    color:
        var(--ht-dark);
}

.ht-dyeing *,
.ht-dyeing *::before,
.ht-dyeing *::after {
    box-sizing: border-box;
}


/* ================================
   LAYOUT
================================ */

.ht-dyeing-inner {
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        42% 58%;

    min-height: 520px;

    align-items: center;
}


/* ================================
   CONTENT
================================ */

.ht-dyeing-content {
    padding:
        70px 55px 70px 5%;
}

.ht-dyeing-eyebrow {
    margin-bottom: 14px;

    font-size: 10px;

    letter-spacing: 3px;

    color: var(--ht-gold);

    text-transform: uppercase;
}

.ht-dyeing-content h2 {
    margin: 0;

    font-size: 38px;

    font-weight: 400;

    letter-spacing: 3px;
}

.ht-dyeing-line {
    width: 40px;
    height: 2px;

    margin:
        20px 0 27px;

    background:
        var(--ht-red);
}

.ht-dyeing-content p {
    max-width: 450px;

    margin: 0;

    font-size: 13px;

    line-height: 2.1;

    color:
        var(--ht-body);
}


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

.ht-dyeing-image {
    height: 470px;

    overflow: hidden;
}

.ht-dyeing-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .7s ease;
}

.ht-dyeing-image:hover img {
    transform:
        scale(1.025);
}


/* ================================
   MOBILE
================================ */

@media (max-width: 800px) {

    .ht-dyeing-inner {
        grid-template-columns:
            1fr;
    }

    .ht-dyeing-content {
        padding:
            65px 25px 45px;
    }

    .ht-dyeing-content h2 {
        font-size: 31px;
    }

    .ht-dyeing-image {
        height: 320px;
    }

}