.landing-page-cover-grid {
    height: 65vh;
    padding: 1.5rem;
    
    display: grid;
    gap: 1rem;

    /* Explicitly define the CSS grid */
    grid-template-areas:
        "a b c d e f g h"
        "r s logo logo logo logo t i"
        "q p o n m l k j";

    /* Define the Sizing */
    grid-template-rows: repeat(3, 33%);
    grid-template-columns: repeat(8, minmax(100px, 1fr));

    /* Variable to stagger the entrance animation */
    --animation-delay: 25ms;
}

/* Define the entrance animation */
@keyframes coverEntrance {
    from {
      opacity: 0;
      transform: scale(0.3);
      filter: grayscale(100%);
      filter: blur(10px);
    }
    to {
      opacity: 75%;
      transform: scale(1);
      filter: grayscale(0%);
      filter: blur(0px);
    }
}

@keyframes logoEntrance {
    from {
      opacity: 0;
      transform: scale(0.3);
      filter: blur(10px);
    }
    to {
      opacity: 1;
      transform: scale(1);
      filter: blur(0px);
    }
}

.landing-page-magazine-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: grey;
    font-size: 3rem;
    color: var(--text);
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;

    /* Positioning/Scaling of any background-image attributes */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Animation Properties */
    animation: coverEntrance 700ms ease-out;
    animation-fill-mode: backwards;

    opacity: 75%;
}

.landing-page-magazine-cover:hover {
    opacity: 100%;
    cursor: pointer;
    transform: translateY(-3px) scale(1.05);
}



/* Place divs into the correct grid area */
.landing-page-magazine-cover:nth-child(1){
    grid-area: a;
    animation-delay: calc(1 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(2){
    grid-area: b;
    animation-delay: calc(2 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(3){
    grid-area: c;
    animation-delay: calc(3 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(4){
    grid-area: d;
    animation-delay: calc(4 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(5){
    grid-area: e;
    animation-delay: calc(5 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(6){
    grid-area: f;
    animation-delay: calc(6 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(7){
    grid-area: g;
    animation-delay: calc(7 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(8){
    grid-area: h;
    animation-delay: calc(8 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(9){
    grid-area: i;
    animation-delay: calc(9 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(10){
    grid-area: j;
    animation-delay: calc(10 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(11){
    grid-area: k;
    animation-delay: calc(11 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(12){
    grid-area: l;
    animation-delay: calc(12 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(13){
    grid-area: m;
    animation-delay: calc(13 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(14){
    grid-area: n;
    animation-delay: calc(14 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(15){
    grid-area: o;
    animation-delay: calc(15 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(16){
    grid-area: p;
    animation-delay: calc(16 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(17){
    grid-area: q;
    animation-delay: calc(17 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(18){
    grid-area: r;
    animation-delay: calc(18 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(19){
    grid-area: s;
    animation-delay: calc(19 * var(--animation-delay));
}
.landing-page-magazine-cover:nth-child(20){
    grid-area: t;
    animation-delay: calc(21 * var(--animation-delay));
}

.landing-page-logo {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-content: center;
    animation: logoEntrance 700ms ease-out;
    animation-fill-mode: backwards;
    animation-delay: calc(20 * var(--animation-delay));
    overflow:auto;
}

.landing-page-logo img {
    padding: 1rem;
    object-fit: contain;
}

/*
.landing-page-logo:hover img {
    transform: scale(1.05);
    transition: 200ms ease;
}
*/

.landing-page-tagline {
    animation: coverEntrance 800ms ease-out;
    animation-fill-mode: backwards;
    animation-delay: calc(22 * var(--animation-delay));
}

/* Adjust the spacing as the screen gets smaller /*/
@media (max-width: 1200px) {
    .landing-page-cover-grid {
        gap: 0.75rem;
    }
}

/* Compress the layout on medium screens */
@media (max-width: 992px) {
    .landing-page-cover-grid{
        height: 60vh;
        padding: 0.75rem;
        
        display: grid;
        gap: 0.5rem;

        /* Explicitly define the CSS grid */
        grid-template-areas:
        "a b c d e"
        "l logo logo logo f"
        "k j i h g";

        /* Define the Sizing */
        grid-template-rows: repeat(3, minmax(100px, 33%));
        grid-template-columns: repeat(5, minmax(50px, 1fr));
    }

    /* Hide the extra covers */
    .landing-page-magazine-cover:nth-child(n+13){
        display: none;
    }

}

@media (max-width: 600px) {
    .landing-page-cover-grid{
        height: 45vh;
        padding: 0.5rem;
        
        display: grid;
        gap: 0.25 rem;

        /* Explicitly define the CSS grid */
        grid-template-areas:
        "a b c d"
        "logo logo logo logo"
        "h g f e";

        /* Define the Sizing */
        grid-template-rows: repeat(3, minmax(50px, 1fr));
        grid-template-columns: repeat(4, minmax(25px, 1fr));
    }

    /* Hide the extra covers */
    .landing-page-magazine-cover:nth-child(n+9){
        display: none;
    }
}


/* If the screen is super short (e.g. on a smartphone in landscape mode) just allow the grid to expand as large as needed */
@media (max-height: 525px){
    .landing-page-cover-grid {
        height: min-content;
    }
}