/* BANNER */
.banner{
    background-image: url("../img/banner.jpg");
    width: 100%;
    height: 375px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    color: white;
}
.banner :where(h1,h2){
    margin: .1%;
    text-align: center;
}
/* CARDS */
body > section{
    margin: 0 3%;
}
section > .flex{
    justify-content: space-around;
    margin: 3% 0;
}
.card{
    border: 2px dashed;
    width: 250px;
    display: flex;
    flex-direction: column;
    padding: 1%;
    text-align: center;
}
.card img{
    height: 100px;
}
.card p{
    margin: 0;
}
body > section:first-of-type .card:nth-child(odd),body > section:nth-of-type(2) .card:nth-child(even){
    border-color: var(--green);
}
body > section:first-of-type .card:nth-child(even),body > section:nth-of-type(2) .card:nth-child(odd){
    border-color: var(--orange);
}
/* OTHERS */
.separator{
    height: 7px;
}
.flex > h1{
    color: var(--orange);
    font-size: 2em;
}
h1 span{
    color: var(--green)
}
@media screen and (max-width: 600px){
    .banner{
        height: 450px;
    }
    .banner :where(h1,h2){
        margin: 5% 0
    }
    .button{
        padding: 1% 2%;
        font-size: x-large;
    }
}