*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

h1, h2 {
    font-size: 30px;
    color: var(--primary-color);
}

body {
    font: 16px/1.2 'Poppins', sans-serif;
    background: linear-gradient(45deg, hsl(236, 100%, 80%,.4), rgba(205,155,225,.3));
}

section.header {
    text-align: center;
    max-width: clamp(30rem, 95%, 50rem);
    width: max(22.5rem, 100%);
    margin-left: auto;
    margin-right: auto;
    padding: 50px 0px;
}

section.gallery {
    --anim-time--hi: 266ms;
    --anim-time--med: 400ms;
    --anim-time--lo: 600ms;
    display: flex;
    place-content: center;
    max-width: clamp(30rem, 95%, 50rem);
    width: max(22.5rem, 100%);
    margin-inline: auto;
    padding: clamp(0px, (30rem  - 100vw) * 9999, 1rem);
    padding-bottom: 50px;
}

.gallery-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .gallery-content > * {
        flex-grow: 1;
        flex-basis: calc((30rem - 100%) * 999);
    }

figure {
    display: flex;
    min-width: 14rem;
    max-height: 16rem;
    position: relative;
    border-radius: .35rem;
    box-shadow: rgb(40, 40, 40, 0.1) 0px 2px 3px, rgb(20, 20, 20, 0.2) 0px 5px 8px, rgb(0, 0, 0, 0.25) 0px 10px 12px;
    overflow: hidden;
    transition: transform var(--anim-time--med) ease;
    cursor: pointer;
}

figure div.video
{
    width:100%;
    height:12rem;
    background-position:center center;
    background-size:cover;
    display:flex;
}

    figure::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, hsla(0, 0%, 0%, 0.8) 0%, hsla(0, 0%, 0%, 0.7) 12%, hsla(0, 0%, 0%, 0.2) 41.6%, hsla(0, 0%, 0%, 0.125) 50%, hsla(0, 0%, 0%, 0.01) 59.9%, hsla(0, 0%, 0%, 0) 100% );
        opacity: 0;
        transition-property: opacity, transform;
        transition-duration: var(--anim-time--med), var(--anim-time--med);
        transition-timing-function: ease, ease;
        z-index: 4;
    }

    figure .header__caption {
        z-index: 10;
        position: absolute;
        display: inline-flex;
        flex-direction: column;
        align-self: flex-end;
        width: 100%;
        gap: 0.5rem;
        padding: 1rem;
        justify-content: center;
        text-align: center;
        transform: translateY(100%);
        transition: transform var(--anim-time--hi) linear, opacity var(--anim-time--hi) linear;
    }

    figure:hover::before {
        opacity: 0.8;
    }

    figure:hover .header__caption {
        transform: translateY(0);
        opacity: 1;
    }

    

    figure:hover img {
        transform: scale(1);
    }

.title {
    color: #fff;
}

.title--primary {
    font-size: 1.25rem;
    font-weight: bold;
}

.title--secondary {
    text-transform: uppercase;
    font-weight: bold;
}

figure img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
    transform: scale(1.15);
    aspect-ratio: 16 / 13;
    transition: 400ms ease-in-out;
}