@keyframes rotateSquare {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.intro-pattern-overlay {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, currentColor 20px, currentColor 40px);
    opacity: 0.03;
    top: -20%;
    left: -30%;
    width: 100%;
    height: 100%;
    animation: rotateSquare 20s linear infinite;
}

.intro-pattern-content {
    max-width: 56rem;
}

/* gallery v17 — diagonal cascade ribbon.
   Geometry shared by both CSS frameworks (Bootstrap has no clip-path / aspect utilities). */
.gallery-cascade__section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mxw-2xl {
    max-width: 42rem !important;
}

.gallery-cascade__head {
    margin-bottom: 4rem;
}

.gallery-cascade__title {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
}

.gallery-cascade__lead {
    font-size: 1.125rem;
}

.gallery-cascade__row {
    flex-direction: column;
    gap: 1.5rem;
}

.gallery-cascade__col {
    min-width: 0;
}

.gallery-cascade__img {
    transition: transform 500ms ease;
}

/* hover zoom — `:where()` keeps specificity at 0-1-0 so Tailwind's hover:scale-110 wins there */
:where(.gallery-cascade__img):hover {
    transform: scale(1.1);
}

@media (min-width: 640px) {
    .gallery-cascade__row {
        flex-direction: row;
        gap: 0;
    }
}

@media (min-width: 768px) {
    .gallery-cascade__title {
        font-size: 2.25rem;
    }
}

/* gallery v17 — diagonal cascade ribbon (clip-path + staggered offsets have no BS analog) */
.gallery-cascade__media {
    aspect-ratio: 3 / 4;
    transition: clip-path 300ms ease;
}

@media (min-width: 640px) {
    [data-cascade-pos] {
        transition: transform 300ms ease;
    }

    [data-cascade-pos="0"] {
        transform: translateY(0);
    }

    [data-cascade-pos="0"] .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }

    [data-cascade-pos="1"] {
        transform: translateY(1.75rem);
    }

    [data-cascade-pos="1"] .gallery-cascade__media {
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
    }

    [data-cascade-pos="2"] {
        transform: translateY(-1.25rem);
    }

    [data-cascade-pos="2"] .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%);
    }

    [data-cascade-pos="3"] {
        transform: translateY(2.25rem);
    }

    [data-cascade-pos="3"] .gallery-cascade__media {
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
    }

    [data-cascade-pos]:hover {
        transform: translateY(0);
    }

    [data-cascade-pos]:hover .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.content-col-grow {
    flex: 1 1 0%;
    min-width: 0;
}

.content-full-frame {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-heading-gap {
    margin-bottom: 2rem;
}

.content-section-pad {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.content-base-height {
    display: block;
    width: 100%;
    height: 16rem;
    min-height: 16rem;
    flex-shrink: 0;
    object-fit: cover;
}

/* Аватар: однаковий фізичний розмір для TW/BS (у BS немає w-12/h-12) */
.dual-column-rating-quote__media {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    flex-shrink: 0;
}