@media (max-width: 800px) {

    #subscriptions {
        padding: 0 !important;
        justify-items: center;
        grid-template-columns: 100% !important;
        grid-template-rows: auto repeat(3, 10rem) auto !important;
        height: 90vh !important;
        align-self: center !important;
    }

    #subscriptions a {
        height: 17rem !important;
    }

    #subscriptions a:nth-of-type(1) {
        grid-row: 2 !important;
        grid-column: 1 !important;
        transform: none !important;
    }

    #subscriptions a:nth-of-type(2) {
        grid-row: 3 !important;
        grid-column: 1 !important;
        rotate: 10deg;
        transform: none !important;
    }

    #subscriptions a:nth-of-type(3) {
        grid-row: 4 !important;
        grid-column: 1 !important;
        rotate: -20deg;
        transform: none !important;
    }

    .cardOne, .cardTwo, .cardThree {
        height: 17rem !important;
    }

    .cardOne:hover, .cardTwo:hover, .cardThree:hover {
        height: 20rem !important;
    }

}

.container {
    display: grid;
    align-content: center;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

#subscriptions {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: space-between;
    padding: 0 8vw;
    box-sizing: border-box;
    align-self: center;
}

#subscriptions a {
    grid-row: 1;
}

.cardOne, .cardTwo, .cardThree {
    height: calc(20rem);
    border-radius: 2vw;
    transition: all 0.15s ease-in-out;
}

.cardThree {
    rotate: 10deg;
    transform: translateY(5vh) !important;
    filter: drop-shadow(10px 10px 15px rgba(59, 59, 59, 0.548));
}

.cardTwo {
    filter: drop-shadow(0px 10px 15px rgba(59, 59, 59, 0.548));
}

.cardOne {
    rotate: -10deg;
    transform: translateY(5vh) !important;
    filter: drop-shadow(-10px 10px 15px rgba(59, 59, 59, 0.555));

}

.cardOne:hover {
    filter: drop-shadow(-40px 40px 25px rgba(59, 59, 59, 0.377));
}

.cardTwo:hover {
    filter: drop-shadow(0px 40px 25px rgba(59, 59, 59, 0.337));
}

.cardThree:hover {
    filter: drop-shadow(40px 40px 25px rgba(59, 59, 59, 0.337));
}

.cardOne:hover, .cardTwo:hover, .cardThree:hover {
    height: 23rem;
}