@media screen and (max-width: 1080px) {


    /***** Structure *****/
    #archiveWrapper .archiveItem {
        position: relative;
    }
    #archiveWrapper .archiveItem {
        display: flex;
        flex-direction: column;
    }
    #archiveWrapper div img {
        width: 100%;
        height: auto;
    }
    #archiveWrapper div img {
        aspect-ratio:  16 / 9;
        object-fit: cover;
        border-radius: 1px;
    }
    #archiveWrapper .achiveDetails {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    #archiveWrapper .achiveDetails  {
        padding: 20px 10px;
    }
    #archiveWrapper div .achiveDetails div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    /***** Details *****/
    #archiveWrapper div .achiveDetails div h1,
    #archiveWrapper div .achiveDetails div h4,
    #archiveWrapper div .achiveDetails div p {
        font-family: 'content-font';
    }
    #archiveWrapper div .achiveDetails div h1 {
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        color: var(--articleBoxText);
    }
    #archiveWrapper div .achiveDetails div h1:hover {
        color: var(--secondary);
        transition: .3s linear;
    }
    #archiveWrapper div .achiveDetails div h4 {
        font-size: 12px;
        color: var(--metadata);
    }
    #archiveWrapper div .achiveDetails div h4 a {
        font-weight: 400;
        color: var(--metadata);
    }
    #archiveWrapper div .achiveDetails div p {
        display: none;
    }
    #archiveWrapper div .achiveDetails div p {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: var(--articleBoxText);
    }

    /***** Date *****/
    #archiveWrapper .achiveDetails h5 {
        position: absolute;
        bottom: 5px;
        right: 5px;
    }
    #archiveWrapper .achiveDetails h5 {
        font-family: 'content-font';
        font-size: 10px;
        font-weight: 400;
        line-height: 20px;
        color: var(--metadata);
    }
    #archiveWrapper .achiveDetails h5 b {
        font-family: 'bold-font';
        font-weight: 400;
    }
   
   
}