body{
    margin: 0;
}

.grid-3{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4dvw;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    padding-bottom: 25px;
}

.grid-2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4dvw;
    padding-left: 2dvw;
    padding-right: 2dvw;
    padding-bottom: 2dvw;
}

.grid-1-1-2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4dvw;
    padding-left: 2dvw;
    padding-right: 2dvw;
    padding-bottom: 2dvw;
}

.flex-3{
    display: flex;
    flex-direction: column;
    gap: 4dvw;
     padding-left: 2dvw;
    padding-right: 2dvw;
    padding-bottom: 2dvw;
}


@media (min-width: 786px){
    .grid-3{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-2{
        grid-template-columns: 1fr 1fr;
    }

    .grid-1-1-2{
        grid-template-columns: 1fr 1fr 2fr;
    }

    .flex-3{
        flex-direction: row;
    }
}
.card{
    padding: 1dvw;
    border: 2px red solid;
    margin-top: 2dvw;
    border-radius: 15px;
}

.main{
background: #fbfb3f;
background: radial-gradient(circle, rgba(251, 251, 63, 1) 0%, rgba(255, 21, 0, 1) 81%);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 100dvh;
}

.main img{
    max-width: 100%;
    max-height: 100%;
}

.top{
    flex: 1;
}

.top h1{
    font-size: clamp(1rem, 12dvh, 4rem);
}

p{
    font-size: clamp(1.5, 12dvw, 3rem);
}

.mid{
    flex: 4;
    min-height: 0;
}

.bot{
    flex: 3;
}