*{
margin: 0;
padding: 0;
}
@font-face {
    font-family: 'steph b';
    src: url(/fonts/steph-font-bold.ttf);
}
@font-face {
    font-family: "steph";
    src: url(/fonts/steph-font.ttf);
}
body {
    background: linear-gradient(135deg, #f0f4f8, #ace4b591);
}

.header{
    font-family: 'steph b';
    color: rgba(97, 160, 2, 0.577);
    font-size: 5rem;
    text-align: center;
}
.container{
    min-height: 300px;
    display: grid;
    grid-template-rows:auto;
    grid-template-columns: repeat(3,300px);
    justify-content: center;
    align-content: center;
    gap: 2rem;
}
.radius{
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.446);
    border-radius: 20px;
    transition: all 0.2s linear;
}
.radius:hover{
    transform: scale(1.02);
}

.pi1{ 
    background-image: url();
    background-size:cover;
    height: 300px;
}
.pi2{ 

    background-image: url();
    background-size: cover;
    height: 300px;
}
.pi3{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi4{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi5{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi6{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi7{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi8{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}
.pi9{ 
    height: 300px;
    background-image: url();
    background-size: cover;
}

@media (max-width:1000px){
    .container{
    grid-template-columns: repeat(2,300px);
}
}
@media (max-width:585px){
    .container{
        gap: 1rem;
    grid-template-columns: repeat(1,360px);
}
}
@media (max-width:430px){
        .header{
            font-size: 3rem;
        }
}
@media (max-width:389px){
        .container{
        gap: 1rem;
    grid-template-columns: repeat(1,260px);
}
}