@import "../animations.css";

.titlepfp:hover {
    animation-name: StretchXAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.models {
    display: flex;
    flex-wrap: warp;
    
    gap: 5%;
}

.model {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1;
    justify-content: space-between;

    width: 12.5%;
    padding: 5px;
    gap: 10px;

    border: 2px solid #ccc;
    border-color: lightcoral;
}

.model_item {
    align-items: center;
    width: 15%;

    text-align: center;

    border: 1px solid #ccc;
    border-width: 0.01vw; 
    border-color: darkslateblue;
}

.model_item:nth-child(n) {
    background-color: #d3d3d3;
}

.model_item:nth-child(2n+1) {
    background-color: #e3e3e3;
}

.model_item:nth-child(3n+1) {
    background-color: #f3f3f3;
}

.model_item:nth-child(4n+1) {
    background-color: #c3c3c3;
}

.model_item:hover {
    transform: scale(1.1, 1.1);
}