/* FLEX ELEMENTS */
.flex {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.flex-grid {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    width: 100%;
}


/* GRID ELEMENTS */
.grid {
    display: grid;
    gap: 20px;

}

@media only screen and (min-width: 650px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 100px) {
    .flex-grid {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 700px) {
    .flex-grid {
       flex-wrap: nowrap;
    }
}