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


    /***** Structure *****/
    #archiveWrapper div {
        position: relative;
    }
    #archiveWrapper div {
        display: grid;
        grid-template-columns: 40% auto;
    }
    #archiveWrapper div img {
        width: 100%;
        height: 100%;
    }
    #archiveWrapper div img {
        object-fit: cover;
        border-radius: 1px;
    }
    #archiveWrapper .achiveDetails {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
    #archiveWrapper .achiveDetails  {
        padding: 20px;
    }
    #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: 18px;
        font-weight: 600;
        line-height: 25px;
        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: 600;
        color: var(--metadata);
    }
    #archiveWrapper div .achiveDetails div p {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: var(--articleBoxText);
    }

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