.main{
    margin-top: 10em;
}

.all-article-wrapper{
    padding: var(--gap);
}

.image-section{
    display: grid;
    gap: var(--gap);
    place-items: start;
}

.icon-section{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--gap); 
    place-items: start;
}

.image-section .image {
    max-width: 40em;
    aspect-ratio: 1.5/1;
    -o-object-fit: cover;
       object-fit: cover;
       border-radius: 1em;
    }
    
.icon-section .icon {
    border-radius: 0.5em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    width: 2.5em;
    padding: 0.5em;
    outline: 2px solid var(--theme-color-1);
}

.icon-white {
    background-color: var(--theme-color-1);
    padding: 0;
  }

.developer{
    border-bottom: 2px solid var(--theme-color-2);
}

@media (min-width: 900px){
    .image-section{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .icon-section{
        grid-template-columns: repeat(3, 1fr);
    }
    
}

@media (min-width: 1200px){
    .image-section{
        grid-template-columns: repeat(3, 1fr);
    }
    .icon-section{
        grid-template-columns: repeat(4, 1fr);
    }
    
}