/* 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);}

/* VIDEO */
.video {padding-block: 30px; --_c-blue-100: #007BFF; --_c-blue-500: #2b6f99;}
.video .video_wrap {display: grid; grid-template-columns: minmax(750px, 857px) 289px; gap: 50px 20px;}
.video .client_video {height: fit-content; display: grid; grid-template-columns: repeat(2 ,1fr); gap: 30px;}
.video .client_video > a {position: relative; height: fit-content;}
.video .client_video > a > :nth-child(2) {height: 48px; padding-top: 5px; margin-bottom: 10px; font-family: var(--ff-primary); font-size: var(--fs-sm, 18px); font-weight: 500; color: var(--_c-blue-500); display: -webkit-box; -webkit-box-orient: vertical; overflow-y: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.video .client_video > a > :where(:nth-child(3), :nth-child(4)) {font-size: var(--fs-base, 16px); color: var(--_c-blue-100);}
.video .client_video > a:hover  > :nth-child(3) {color: var(--_c-blue-500); text-decoration: underline;}
.video .client_video > a > :nth-child(4) {float: right;}
.video .client_video > a::after {width: 100%; height: 75%; position: absolute; top: 0; left: 0; background: no-repeat center/76px url('../images/video-play.webp'); content: '';}
.pagination {display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; --_-c-light-100: #e9e9e9; grid-column: 1/3;}
.pagination li {border: 1px solid var(--_-c-light-100);}
.pagination :where(a, span) {display: block; background-color: #fff; color: var(--c-tertiary); padding: 8px 12px;}
.pagination a:hover {color: var(--c-secondary);}
.pagination a[aria-hidden="true"] {display: none;}
:where(.pagination, .pagination *) {transition: var(--transition);}
:where(.video, .video :where(.video_wrap, .client_video, .client_video *)) {transition: var(--transition);}

/* MEDIA QUERIES */
@media only screen and (max-width: 1200px){
    .video .video_wrap{grid-template-columns: minmax(650px, 857px) 250px;}
}

@media only screen and (max-width: 991px) {
    .video .video_wrap {grid-template-columns: 1fr;}
    .video .client_video a img {width: 100%;}
    .video .client_video > a::after {background-size: 50px;}
    .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: 767px) {
    .video {padding-block: 20px;}
    .video .client_video > a > :nth-child(3) {display: block;}
    .video .client_video > a > :nth-child(4) {float: left;}
}

@media only screen and (max-width: 575px){
    .video .client_video {gap: 15px;}
    .video .client_video > a > :nth-child(2) {height: 43px;}
    .video .client_video > a > :where(:nth-child(3), :nth-child(4)) {font-size: var(--fs-xs, 14px);}
}

@media only screen and (max-width: 475px) {
    .video .client_video {grid-template-columns: 1fr;}
    .video .video_wrap {gap: 30px;}
    .quote-form form .group {flex-wrap: wrap;}
    .quote-form form :is(input[id="quantity"], input[id="contact"]) {width: 100%;}
    .pagination {grid-column: 1/2; margin-top: 20px;}
}