.library-grid{ --h: 469px; gap: 100px 30px;}

div:where(.swal2-container) div:where(.swal2-popup){
    border-radius: 0 !important;
}

.site-logo img{ height: 35px;}
.site-logo:has(img)::before,
.site-logo:has(img)::after{ bottom: -5px;}


@media screen and (min-width: 968px) {
    .library-grid > div:nth-child(3n + 1)::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 350px; background-color: rgb(188 209 55 / .1); pointer-events: none; z-index: -1; transform: translateY(calc(-100% + 50px));}

    .library-grid > div:nth-child(1)::before{ top: calc(var(--h) * 1 + (100px * 0));}
    .library-grid > div:nth-child(4)::before{ top: calc(var(--h) * 2 + (100px * 1));}
    .library-grid > div:nth-child(7)::before{ top: calc(var(--h) * 3 + (100px * 2));}
    .library-grid > div:nth-child(10)::before{ top: calc(var(--h) * 4 + (100px * 3));}
    .library-grid > div:nth-child(13)::before{ top: calc(var(--h) * 5 + (100px * 4));}
    .library-grid > div:nth-child(16)::before{ top: calc(var(--h) * 6 + (100px * 5));}
    .library-grid > div:nth-child(19)::before{ top: calc(var(--h) * 7 + (100px * 6));}
    .library-grid > div:nth-child(22)::before{ top: calc(var(--h) * 8 + (100px * 7));}
}

@media screen and (min-width: 600px ) and (max-width: 968px) {
    .library-grid > div:nth-child(2n + 1)::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 350px; background-color: rgb(188 209 55 / .1); pointer-events: none; z-index: -1; transform: translateY(calc(-100% + 50px));}

    .library-grid > div:nth-child(1)::before{ top: calc(var(--h) * 1 + (100px * 0));}
    .library-grid > div:nth-child(3)::before{ top: calc(var(--h) * 2 + (100px * 1));}
    .library-grid > div:nth-child(5)::before{ top: calc(var(--h) * 3 + (100px * 2));}
    .library-grid > div:nth-child(7)::before{ top: calc(var(--h) * 4 + (100px * 3));}
    .library-grid > div:nth-child(9)::before{ top: calc(var(--h) * 5 + (100px * 4));}
    .library-grid > div:nth-child(11)::before{ top: calc(var(--h) * 6 + (100px * 5));}
    .library-grid > div:nth-child(13)::before{ top: calc(var(--h) * 7 + (100px * 6));}
    .library-grid > div:nth-child(15)::before{ top: calc(var(--h) * 8 + (100px * 7));}
}

@media screen and (max-width: 968px) {
    .library-grid{ gap: 100px 20px; grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 600px) {
    .library-grid{ --h: 440px; gap: 100px; display: flex; flex-direction: column;}

    
    .library-grid > div::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 350px; background-color: rgb(188 209 55 / .1); pointer-events: none; z-index: -1; transform: translateY(calc(-100% + 50px));}

    .library-grid > div:nth-child(1)::before{ top: calc(var(--h) * 1 + (100px * 0));}
    .library-grid > div:nth-child(2)::before{ top: calc(var(--h) * 2 + (100px * 1));}
    .library-grid > div:nth-child(3)::before{ top: calc(var(--h) * 3 + (100px * 2));}
    .library-grid > div:nth-child(4)::before{ top: calc(var(--h) * 4 + (100px * 3));}
    .library-grid > div:nth-child(5)::before{ top: calc(var(--h) * 5 + (100px * 4));}
    .library-grid > div:nth-child(6)::before{ top: calc(var(--h) * 6 + (100px * 5));}
    .library-grid > div:nth-child(7)::before{ top: calc(var(--h) * 7 + (100px * 6));}
    .library-grid > div:nth-child(8)::before{ top: calc(var(--h) * 8 + (100px * 7));}
}