/* default styles */

.flex {
    display: flex;
}

.flex-align-center {
    align-items: center;
}

.flex-justify-center {
    justify-content: center;
}

.flex-justify-sp-bt {
    justify-content: space-between;
}

.flex-justify-sp-ar {
    justify-content: space-around;
}

.flex-al-cen-jus-cen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column {
    flex-direction: column;
}

.grid {
    display: grid;
}

/* responsive styles */

@media screen and (max-width: 768px) {
    /* styles for screens up to 768px */
    
    .flex {
        flex-wrap: wrap;
    }
    
    .flex > * {
        flex-basis: 50%;
    }
    
    .flex-align-center {
        align-items: flex-start;
    }
    
    .flex-justify-sp-bt {
        justify-content: flex-start;
    }
    
    .flex-justify-sp-ar {
        justify-content: flex-start;
    }
    
    .flex-al-cen-jus-cen {
        flex-direction: column;
    }
    
    .column {
        flex-direction: row;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    /* styles for screens up to 480px */
    
    .flex > * {
        flex-basis: 100%;
    }
    
    .flex-align-center {
        align-items: flex-start;
    }
    
    .flex-justify-sp-bt {
        justify-content: flex-start;
    }
    
    .flex-justify-sp-ar {
        justify-content: flex-start;
    }
    
    .flex-al-cen-jus-cen {
        flex-direction: column;
    }
    
    .column {
        flex-direction: row;
    }
    
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}