body {
    margin: 0;
    background: #222;
    /* coment */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 520;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header{
    background: #08ca0b;
    width: 100%;
    position: fixed;
    top: 0;
}
header::after{
    content: '';
    display: table;
    clear: both;
}

.logo {
    float:left;
    height: 150px;
    width: auto;


}
nav {
    float: right;
}
nav ul{
    margin: 1;
    list-style: none;
    padding: 0;
}
nav li{
    display: inline-block;
    margin-left: 70px;
    padding-top: 25px;
    position: relative;

}

nav a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    background-color: #4bd8b7;
    background-image: linear-gradient(45deg, #000000, #620375);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;

}

nav a:hover {
    color: #000;
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    width: 0%;
    background: linear-gradient(45deg, #000000,#620375);
    position: absolute;
    top: 0;
    transition: all ease-in-out 250ms;

}

nav a:hover::before{
    width: 100%;
}

.portfolio-grid {
    margin-top: 12%;
    display: grid;
    gap: 1.5rem;

    padding-block: 2rem;
    width: min(95%, 70rem);
    margin-inline: auto;
}

.portfolio-card {
    background: rgb(170, 163, 163);
    border-radius: 5%;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .5rem;
}


.card__ing{

    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: fill;
    border-radius: 10px 10px;
    max-height: 15rem;
}



@media screen and (min-width: 30em) {

    .portfolio-grid {
        margin-top: 50%;
        grid-template-columns: 1fr 1fr 1 fr;

    }
}

@media screen and (min-width: 35em) {

    .portfolio-grid {
        margin-top: 45%;
        grid-template-columns: 1fr 1fr 1 fr;

    }
}


@media screen and (min-width: 40em) {

    .portfolio-grid {
        margin-top: 39%;
        grid-template-columns: 1fr 1fr 1 fr;

    }
}

@media screen and (min-width: 50em) {

    .portfolio-grid {
        margin-top:25%;
        grid-template-columns: 1fr 1fr 1 fr;

    }
}

@media screen and (min-width: 60em) {

    .portfolio-grid {
        margin-top: 15%;
        grid-template-columns: 1fr 1fr 1 fr;

    }
   
    .grid-col-span-3 {
        background: #0942bddb;
        grid-column: span 3;
        max-height: 30rem;
        border-radius: 10px 10px;
    }
    .grid-col-span-3 .card__ing {
       max-height: 20rem;
    }
}