/* Brand */
.brand__grid {
    grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.25fr);
}

.brand__text {
    margin-bottom: var(--space-5);
    max-width: 38rem;
}

.brand__text p {
    font-size: 0.9375rem;
    line-height: 1.58;
}

.brand__actions {
    margin-top: 0;
    align-items: center;
    gap: var(--space-5);
}

.brand__media {
    background: var(--color-bg);
}

.brand__media img {
    object-position: 55% 8%;
}

/* Details */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.detail-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.detail-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--color-bg-alt);
}

.detail-card__body {
    flex: 1;
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: 0 0 var(--radius) var(--radius);
}

.detail-card .h3 {
    margin: 0 0 var(--space-2);
}

.detail-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-wrap: balance;
}

/* Lifestyle */
.lifestyle {
    position: relative;
    overflow: hidden;
}

.lifestyle__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.9fr);
    gap: var(--space-6);
}

.lifestyle__copy {
    position: relative;
    z-index: 1;
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
}

.section__title em {
    font-style: normal;
    color: #7f93a8;
}

.lifestyle__text {
    max-width: 34rem;
}

.lifestyle__media img {
    object-position: 55% 12%;
}

.feature-row--tight {
    margin-top: var(--space-5);
    margin-bottom: 0;
    padding-top: var(--space-5);
    position: relative;
    z-index: 2;
}

/* Process */
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.process-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.process-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    background: var(--color-bg-alt);
}

.process-card__body {
    padding: var(--space-4);
}

.process-card__num {
    margin-bottom: var(--space-2);
    font-size: 1.5rem;
}

.process-card .h3 {
    margin: 0 0 var(--space-2);
}

.process-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* History */
.history__grid {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
}

.history__media img {
    object-position: left 25%;
}

.history__copy .section__title {
    margin-bottom: var(--space-5);
}

.history__text {
    gap: var(--space-4);
}

/* Responsive */
@media (max-width: 1199.98px) {
    .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 991.98px) {
    .brand__grid {
        grid-template-columns: minmax(10rem, 0.68fr) minmax(0, 1.32fr);
    }

    .brand__media {
        align-self: stretch;
    }

    .history__grid {
        grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1.35fr);
    }

    .lifestyle__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.85fr);
    }

    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767.98px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand__media {
        order: -1;
        min-height: 18rem;
        aspect-ratio: 4 / 5;
        max-height: 24rem;
    }

    .history__media {
        aspect-ratio: 5 / 4;
        max-height: none;
        min-height: 0;
    }

    .lifestyle__media {
        min-height: 0;
        aspect-ratio: 5 / 6;
        max-height: 26rem;
    }

    .brand__grid,
    .history__grid,
    .lifestyle__grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 575.98px) {
    .details-grid,
    .process-grid {
        gap: var(--space-3);
    }

    .brand__media {
        max-height: none;
        width: 100%;
    }

}