.amytes-first-post-thumbnail-wrapper {
    overflow: hidden;
}

.attachment-amytes-first-post-thumbnail {
    object-fit: cover;
    object-position: 50% 0;
    width: 100%;
    height: calc(80vh - 100px);
    filter: blur(4px) brightness(80%) saturate(1.5);
    transform: scale(1.1);
}

.attachment-amytes-post-thumbnail {
    grid-area: thumbnail;
    object-fit: cover;
    object-position: 50% 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 8px;
    cursor: pointer;
}

.content.home > div > a {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content;
    grid-template-areas: 'thumbnail title';
    text-decoration: none;
    color: rgb(233, 233, 233);
    align-items: center;
    cursor: default;
}

.content.home > div > a .post-title,
.content.home > div:first-child > a .first-post-header {
    z-index: 5;
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    text-align: center;
    cursor: pointer;
}

.content.home > div:first-child > a .first-post-header {
    font-size: 3vmax;
    width: 80%;
    text-transform: uppercase;
    cursor: default;
}

.content.home > div {
    margin: 24px 12px;
    text-align: left;
}

.navigation.pagination {
    text-align: center;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

.navigation.pagination > h2 {
    font-size: 2vmin;
    margin-bottom: 4px;
}

.navigation.pagination .nav-links > a:link {
    color: #a953ff;
}

@media (min-width: 425px) {
    .amytes-first-post-thumbnail-wrapper {
        border-radius: 7.6px;
        box-shadow: 0 0 4px 4px white inset;
    }

    .attachment-amytes-first-post-thumbnail {
        height: 80vh;
    }
}

@media (min-width: 768px) {
    .content.home > div:first-child > a .first-post-header {
        font-size: 2.5vmin;
    }

    .navigation.pagination {
        grid-column: 2;
    }

    .content.home > div:first-child > a .first-post-header {
        width: 60%;
    }
}

@media (min-width: 1024px) {
    .content.home > div:first-child > a .first-post-header {
        font-size: 3vmin;
        margin: 4vmax;
        margin-bottom: 0;
        padding: 4vmin;
    }

    .first-post-button {
        padding: 0.5vmax;
        font-size: 0.55em;
    }

    .content.home {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'first first first';
        grid-template-rows: min-content;
        grid-auto-rows: 1fr;
    }

    .content.home > div > a {
        display: flex;
        height: 100%;
        position: relative;
    }

    .attachment-amytes-post-thumbnail {
        width: 250px;
        height: 250px;
        margin: 28px auto;
        filter: brightness(0.8);
    }

    .attachment-amytes-post-thumbnail:hover {
        width: 250px;
        height: 250px;
        margin: 28px auto;
        filter: brightness(0.95);
        transition: filter ease-out 0.2s;
    }

    .content.home > div > a > h2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 56px;
        width: 178px;
        background-color: #141212b2;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 8px;
    }

    .content.home > div > a > h2:hover {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 56px;
        width: 178px;
        background-color: #e9e9e9;
        transition: background-color 0.2s ease-in, color 0.1s ease-in;
        color: #1b1b1b;
        box-shadow: 1px 1px #000;
        border-radius: 8px;
        padding: 8px;
        box-shadow: #0000005e 0px 0px 2px 1px;
    }
}