.bobcat-hero,
.bobcat-highlights {
    background-color: var(--site-dark-background);
}

.bobcat-hero {
    min-height: clamp(36rem, 50vw, 46rem);
}

.bobcat-hero > .container {
    min-height: inherit;
}

.bobcat-hero-media {
    position: absolute;
    inset: 0;
}

.bobcat-hero-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(12, 10, 9, 0.95) 0%, rgba(12, 10, 9, 0.82) 32%, rgba(12, 10, 9, 0.15) 62%, transparent 75%);
}

.bobcat-highlights {
    border-top: 1px solid var(--si-border-color);
}

.bobcat-finish-swatch {
    width: 1.75rem;
    height: 1.75rem;
}

.bobcat-specifications > div {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--si-border-color);
}

.bobcat-specifications dt {
    color: var(--si-heading-color);
}

.bobcat-specifications dd {
    margin-bottom: 0;
}

.bobcat-drawing {
    height: clamp(12rem, 25vw, 21rem);
}

@media (max-width: 991.98px) {
    .bobcat-hero {
        min-height: auto;
    }

    .bobcat-hero-media {
        position: relative;
        aspect-ratio: 1672 / 941;
    }

    .bobcat-hero-media::after {
        background: linear-gradient(0deg, var(--site-dark-background), transparent 35%);
    }

    .bobcat-details-image {
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 575.98px) {
    .bobcat-specifications > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}