main {
    margin: 0 30px;  
padding: 20px 30px; 
    width: 100%; 
}

.article-wrapper {
    display: grid; 
    grid-template-columns: auto auto auto auto; 
    
}

.article-container { 
    height: 400px;
    width: 285px;
    padding: 10px; 
    margin: 15px; 
    box-sizing: border-box;
    overflow: hidden; 
    box-shadow: 5px 5px 10px lightgrey; 
    
    
    
 }

.article-container:hover{ 
transform: scale(1.05, 1.05); 
transition: 0.5s; 
}

.article-date {
    
    font-size: 16px;
    
}

main img { 
width: 265px;
margin: auto;
backface-visibility: hidden; 
opacity: 1;
height: 144px; 
    
    
}

main img:hover{
    
opacity: 0.5;
transition: 0.3s; 
    
}

main a {
text-decoration: none; 
    
}

main a:hover{ 

text-decoration: none; 
color: grey; }

.article-title {
    font-size: 24px; 
    font-weight: 500; 
    text-align: center; 
}

.article-content { 
font-size: 16px;
margin: 0; 
padding-bottom: 10px; 
}


/* MEDIA */ 
@media(max-width: 768px){
    
   .article-wrapper {
    display: block; 
    
}

.article-container { 
    height: 400px;
    width: 90%;
    padding: 10px; 
    margin: 15px; 
    box-sizing: border-box;
    overflow: hidden; 
    box-shadow: 5px 5px 10px lightgrey; 
    
    
    
 }

.article-container:hover{ 
transform: scale(1.05, 1.05); 
transition: 0.5s; 
}

.article-date {
    
    font-size: 16px;
    
}

main img { 
display: block; 
width: 265px;
margin: auto;
left:  
backface-visibility: hidden; 
opacity: 0.8;
height: 144px;
z-index: -10;

    
    
    
}

main img:hover{
    
opacity: 0.5;
transition: 0.3s; 
    
}

main a {
text-decoration: none; 
    
}

main a:hover{ 

text-decoration: none; 
color: grey; }

.article-title {
    font-size: 24px; 
    font-weight: 500; 
    text-align: center; 
}

.article-content { 
font-size: 16px;
margin: 0; 
padding-bottom: 10px; 
}


/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktopvs, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/