* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
    background: #1e1e1e;
}

.wrapper {
    padding: 100px 20px 20px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.card {
    --bgImg: '';
    --logoImg: '';
    --heroImg: '';
    --transition: 0.3s ease;
    aspect-ratio: 9 / 16;
    width: 200px;
    display: block;
    position: relative;

    &:hover {
        z-index: 1;

        &::after {
            opacity: 1;
            bottom: 25px;
            scale: 1.25;
            filter: drop-shadow(0px 0px 5px #fff);
        }

        &::before {
            bottom: 40px;
            filter: drop-shadow(0px 0px 5px #fff);
            scale: 1.1;
        }

        .content {
            rotate: x 35deg;

            &::after {
                opacity: 1;
            }
        }
    }

    &::before {
        content: '';
        width: 90%;
        left: 5%;

        height: 100px;
        position: absolute;
        background: var(--logoImg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom center;
        transition: all var(--transition);
        pointer-events: none;
        bottom: 0;
        z-index: 1;
        scale: 0.8;
        filter: drop-shadow(0px 0px 5px transparent);
    }

    &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: var(--heroImg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0;
        transition: all var(--transition);
        pointer-events: none;
        bottom: 0;
        scale: 0.8;
        transform-origin: bottom;
        filter: drop-shadow(0px 0px 5px transparent);
    }

    .content {
        width: 100%;
        height: 100%;
        background: var(--bgImg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: rotate var(--transition);
        pointer-events: none;
        overflow: hidden;
        border-radius: 5px;

        &::after {
            content: '';
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
            opacity: 0;
            transition: all var(--transition);
        }
    }
}