*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

section{
    width: 85%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

article{
    width: 18.6%;
    display: inline-block;
    height: 75vh;
    margin: 1vw;
    
    
}

h2{
    vertical-align: top;
    height: 41vh;
    
}
.nada{
    display: none;
}

article>p{
    display: inline;
    background-color: black;
    color: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.im1{
    background-image: url("../images/image1.avif");
    height: 18.5vh;    
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    text-align: center;
    justify-content: left;
    padding: 0.4vw;
}
.im2{
    background-image: url("../images/image2.avif");
    height: 18.5vh;    
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
span{
    background-color: black;
    text-align: left;
    font-size: 0.8rem;
}
.im3{
    background-image: url("../images/image3.avif");
    height: 18.5vh;    
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
.im4{
    background-image: url("../images/image4.avif");
    height: 18.5vh;
    
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
a{
    color:black;
    text-decoration: none;
}

:active{
    color: black;
}
:visited{
    color: black;
}

@media (max-width:992px) {
    
   
section{
           
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
    width: 100vw;
   
}

article{
    padding-left: 1%;
    display: inline-block;
    width: 100%;
    height: 60vh;
  
    margin: 1vw;
    
    padding-bottom: 7%;
   
}

h2{
    vertical-align: top;
    width: 95%;
    height: 14vh;
    font-size: 2rem;
}

article>p{
    display: inline;
    background-color: black;
    color: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 95%;
    
    
}

.im1{
    background-image: url("../images/image1.avif");
    height: 40vh;
    background-size: cover;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    text-align: center;
}
.im2{
    background-image: url("../images/image2.avif");
    height: 40vh;
    width: 95%;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
span{
    background-color: black;
    text-align: left;
    font-size: 0.8rem;
}
.im3{
    background-image: url("../images/image3.avif");
  
    width: 95%;
    height: 40vh;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
.im4{
    background-image: url("../images/image4.avif");
    height: 40vh;
    width: 95%;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
}
aside{
    width: 1vw;
}
@media (max-width:768px) {
    main{
        background-color:pink;
        width: 100%;
}
section{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    
    background-color: antiquewhite;
}

article{
    
    display: flex;
    flex-direction: row;
    height: 60vh;
    width: 90%;
    margin: 1vw;
    flex-wrap: wrap;
    
}

h2{
    vertical-align: top;
    width: 95%;
    height: 20vh;
}

article>p{
    display: inline;
    background-color: black;
    color: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    
    
}

.im1{
    background-image: url("../images/image1.avif");
    height: 40vh;
    width: 95%;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    text-align: center;
}
.im2{
    background-image: url("../images/image2.avif");
    height: 40vh;
    width: 95%;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
span{
    background-color: black;
    text-align: left;
    font-size: 0.8rem;
}
.im3{
    background-image: url("../images/image3.avif");
  
    width: 95%;
    height: 40vh;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
.im4{
    background-image: url("../images/image4.avif");
    height: 40vh;
    width: 95%;
    display: flex;
    align-items: end;
    color: white;
    background-size: cover;
    justify-content: left;
    padding: 0.4vw;
}
}
aside{
    width: 1vw;
}
Footer
© 2023 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About