.cover {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: 64px 30px;
}

.memory-menu {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 300px)
        );
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    width: min(1040px, 100%);
    perspective: 1200px;
}

.memory-card {
    --accent: 177, 154, 255;

    position: relative;
    display: grid;
    grid-template-rows: 30px 1fr 78px;
    align-items: center;
    width: 100%;
    height: 370px;
    padding: 28px;
    overflow: hidden;
    color: #f7f5ff;
    text-align: center;
    text-decoration: none;
    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(var(--accent), 0.12),
            transparent 33%
        ),
        radial-gradient(
            circle at 20% 10%,
            rgba(255, 255, 255, 0.04),
            transparent 25%
        ),
        linear-gradient(
            155deg,
            rgba(17, 19, 38, 0.78),
            rgba(5, 6, 16, 0.72)
        );
    border:
        1px solid
        rgba(var(--accent), 0.2);
    border-radius: 3px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translateZ(0);
    transition:
        transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 450ms ease,
        box-shadow 450ms ease,
        opacity 450ms ease;
    isolation: isolate;
}

.memory-card:nth-child(1) {
    --accent: 177, 154, 255;
}

.memory-card:nth-child(2) {
    --accent: 111, 174, 255;
}

.memory-card:nth-child(3) {
    --accent: 255, 130, 178;
}

.memory-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: -1;
    border:
        1px solid
        rgba(var(--accent), 0.07);
    pointer-events: none;
    transition:
        border-color 450ms ease,
        inset 450ms ease;
}

.memory-card::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 74px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--accent), 0.95),
            transparent
        );
    box-shadow:
        0 0 22px
        rgba(var(--accent), 0.72);
    transform: translateX(-50%);
    transition:
        width 450ms ease,
        box-shadow 450ms ease;
}

.memory-card:hover {
    z-index: 2;
    transform:
        translateY(-14px)
        scale(1.018);
    border-color:
        rgba(var(--accent), 0.55);
    box-shadow:
        0 42px 100px rgba(0, 0, 0, 0.42),
        0 0 42px rgba(var(--accent), 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.memory-card:hover::before {
    inset: 7px;
    border-color:
        rgba(var(--accent), 0.16);
}

.memory-card:hover::after {
    width: 170px;
    box-shadow:
        0 0 30px
        rgba(var(--accent), 0.9);
}

.memory-menu:has(.memory-card:hover)
.memory-card:not(:hover) {
    opacity: 0.62;
    transform:
        scale(0.975);
}

.memory-card:focus-visible {
    outline:
        2px solid
        rgba(var(--accent), 0.95);
    outline-offset: 6px;
}

.memory-card__number {
    align-self: start;
    color:
        rgba(var(--accent), 0.68);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.28em;
}

.memory-card__number::before {
    content: "CAPÍTULO ";
    color:
        rgba(225, 224, 245, 0.28);
}

.memory-card__icon {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 94px;
    height: 94px;
    color:
        rgb(var(--accent));
    background:
        linear-gradient(
            145deg,
            rgba(var(--accent), 0.13),
            rgba(var(--accent), 0.025)
        );
    border:
        1px solid
        rgba(var(--accent), 0.28);
    box-shadow:
        0 0 0 9px
        rgba(var(--accent), 0.025),
        0 18px 50px
        rgba(var(--accent), 0.09);
    transform: rotate(45deg);
    transition:
        transform 550ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 450ms ease,
        box-shadow 450ms ease;
}

.memory-card__icon::before,
.memory-card__icon::after {
    content: "";
    position: absolute;
    background:
        rgba(var(--accent), 0.52);
}

.memory-card__icon::before {
    top: 50%;
    left: -19px;
    width: 10px;
    height: 1px;
}

.memory-card__icon::after {
    top: -19px;
    left: 50%;
    width: 1px;
    height: 10px;
}

.memory-card__icon iconify-icon {
    width: 37px;
    height: 37px;
    transform: rotate(-45deg);
    filter:
        drop-shadow(
            0 0 10px
            rgba(var(--accent), 0.3)
        );
}

.memory-card:hover
.memory-card__icon {
    background:
        linear-gradient(
            145deg,
            rgba(var(--accent), 0.22),
            rgba(var(--accent), 0.05)
        );
    box-shadow:
        0 0 0 13px
        rgba(var(--accent), 0.035),
        0 22px 60px
        rgba(var(--accent), 0.17);
    transform:
        rotate(45deg)
        scale(1.08);
}

.memory-card__title {
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 16px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.memory-card__arrow {
    position: absolute;
    right: 20px;
    bottom: 19px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color:
        rgba(var(--accent), 0.58);
    border:
        1px solid
        rgba(var(--accent), 0.13);
    transition:
        color 350ms ease,
        border-color 350ms ease,
        transform 350ms ease,
        background 350ms ease;
}

.memory-card__arrow iconify-icon {
    width: 17px;
    height: 17px;
}

.memory-card:hover
.memory-card__arrow {
    color:
        rgb(var(--accent));
    background:
        rgba(var(--accent), 0.08);
    border-color:
        rgba(var(--accent), 0.38);
    transform:
        translate3d(
            3px,
            -3px,
            0
        );
}

@media (max-width: 980px) {
    .cover {
        align-items: flex-start;
        padding:
            54px
            24px;
    }

    .memory-menu {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 300px)
            );
    }

    .memory-card:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 300px;
    }
}

@media (max-width: 680px) {
    .cover {
        padding:
            38px
            18px;
    }

    .memory-menu {
        grid-template-columns:
            minmax(0, 320px);
        gap: 20px;
    }

    .memory-card,
    .memory-card:nth-child(3) {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        height: 350px;
    }

    .memory-menu:has(.memory-card:hover)
    .memory-card:not(:hover) {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .memory-card,
    .memory-card::before,
    .memory-card::after,
    .memory-card__icon,
    .memory-card__arrow {
        transition: none;
    }
}