
/* Reviews */
.reviews {padding-block: 40px 10px;}
.reviews .wrapper {display: grid; grid-template-columns: minmax(640px, 830px) minmax(305px, 344px); gap: 32px 14px;}
.reviews .content iframe {width: 100%; border-radius: 12px; margin-bottom: 20px;}
.reviews .content :where(h2, h3, h4, h5, h6) { line-height: 1.3; color: #1E1E1E; margin-bottom: 20px;}
.reviews .content h2 {font-size: calc(var(--fs-md, 24px) + 4px);}
.reviews .content h3 {font-size: calc(var(--fs-md, 24px) + 2px);}
.reviews .content h4 {font-size: var(--fs-md, 24px);}
.reviews .content h5 {font-size: calc(var(--fs-sm, 18px) + 2px);}
.reviews .content h6 {font-size: calc(var(--fs-base, 16px) + 2px);}
.reviews .content :where(ul, ol) {padding-left: 1.125rem; margin-bottom: 1.25rem;}
.reviews .content :where(ul, ol) li {font-size: var(--fs-base, 16px);}
.reviews .content ul li {list-style: disc;}
.reviews .content ol li {list-style: auto;}
.reviews .content li:not(:last-child) {margin-bottom: 0.35rem;}
.reviews .content p {font-size: var(--fs-base, 16x);}
.reviews .content p:not(:last-child) {margin-bottom: 20px;}
.reviews .content p a {display: inline-block; font-size: var(--fs-base, 16px); color: var(--c-primary);}
.reviews .content p strong {font-size: var(--fs-base, 16px); color: var(--c-light);}
.reviews .content span {display: block; font-size: var(--fs-xs, 14px); font-weight: 600; text-transform: capitalize; margin-bottom: 25px;}

@media only screen and (max-width: 991px) {
    .reviews {padding-top: 30px;}
    .reviews .wrapper {grid-template-columns: 1fr;}
    .reviews .content > :first-child {margin-bottom: 14px;}
    .reviews .content > :nth-child(2) {margin-bottom: 14px;}
    .reviews .content > :nth-child(3) {margin-bottom: 16px;}
    .reviews .content p:not(:last-of-type) {margin-bottom: 14px;}
}
@media only screen and (max-width: 575px) {
    .reviews {padding-top: 16px;}
    .reviews .wrapper {gap: 14px;}
    .reviews .content iframe {height: 250px;}
    .reviews .content > :nth-child(2) {margin-bottom: 6px;}
    .reviews .content > :nth-child(3) {margin-bottom: 8px;}
    .reviews .content p:not(:last-of-type) {margin-bottom: 6px;}
    .reviews .content :where(ul, ol) {margin-bottom: 0.75rem;}
}

/* Videoes */
.videos {padding-bottom: 60px;}
.videos .head > :first-child {font-size: var(--fs-md, 24px); color: #1E1E1E; text-transform: capitalize; margin-bottom: 17px;}
.videos .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.videos .image {position: relative; margin-bottom: 10px; overflow: hidden;}
.videos .image img {width: 100%; border-radius: 12px; } 
.videos .image::before {position: absolute; inset: auto auto 12px 14px; width: 41px; height: 41px; background: no-repeat center/cover url('https://www.kolaxopackaging.com/theme/website/images/icons/play-video.png'); content: ''; z-index: 2;}
.videos .review > :nth-child(2) {font-size: calc(var(--fs-sm, 18px) - 1px); color: #1E1E1E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px;}
.videos .review > :nth-child(3) {display: block; font-size: calc(var(--fs-xs, 14px) - 5px); font-weight: 600; color: var(--c-primary);}
.videos .review:hover .image img {transform: scale(1.1); transition: var(--transition);}
.videos .review:hover > :nth-child(2) {color: var(--c-primary);}

@media only screen and (max-width: 991px) {
/* Videos */
.videos {padding-bottom: 40px;}
.videos .wrapper {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 575px){
/* Videos */
.videos {padding-bottom: 30px;}
.videos .head > :first-child {margin-bottom: 10px;}
.videos .wrapper {grid-template-columns: 1fr;}
.videos .review > :nth-child(2) {margin-bottom: 6px;}
} 