/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/* DETAILS */
.details {padding-block: 50px; --_c-dark-700: #525d63;}
.details .wrapper {display: grid; grid-template-columns: 1fr 289px; gap: 30px;}
.details .post iframe {width: 100%; margin-bottom: 15px;}
.details .post > :nth-child(2) {font-size: var(--fs-md, 24px); color: var(--c-secondary); margin-bottom: 10px;}
.details .post :where(h2, h3, h4, h5, h6) {color: var(--c-secondary);}
.details .post :where(h4, h5, h6) {font-size: var(--fs-base, 16px);}
.details .post :where(p, ul, ol) {margin-bottom: 15px; color: var(--_c-dark-700);}
.details .post li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.details .post li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}
:where(.details, .details :where(.wrapper, .post, .post *)) {transition: var(--transition);}

/* MEDIA QUERIES */
@media only screen and (max-width: 991px) {
    .breadcrumb li .active {text-wrap: pretty;}
    .details .wrapper {display: grid; grid-template-columns: 1fr;}
}

@media only screen and (max-width: 767px) {
    .details {padding-block: 20px;}
    .quote-form form .group {flex-wrap: nowrap;}
    .quote-form form :is(input[id="quantity"], input[id="contact"]) {width: auto;}
}

@media only screen and (max-width: 575px) {
    .details .post iframe {max-height: 270px;}
}

@media only screen and (max-width: 475px) {
    .quote-form form .group {flex-wrap: wrap;}
    .quote-form form :is(input[id="quantity"], input[id="contact"]) {width: 100%;}
}