:root {
    --bg-header: rgb(81, 43, 212);
    --sombra-inset: rgba(120, 98, 201, 0.473);
}

@media (max-width: 425px) {
    .main__IaL {
        font-size: 10pt;
        padding: 0 2%;
        box-shadow: inset -10px -8px 6px 6px var(--sombra-inset);
        border: 1px var(--bg-header) solid;
        border-right: 2px var(--bg-header) solid;
        border-bottom: 2px var(--bg-header) solid;
    }
    
    .vsVertical {
        font-size: 24pt;
    }

    .main__contLayout {
        height: 70vh;
        margin: 10% 0;
        grid-template: 10% repeat(6,1fr) / repeat(5,1fr) 15%;
        box-shadow: none;
        border: 1px var(--bg-header) solid;
        border-right: 2px var(--bg-header) solid;
        border-bottom: 2px var(--bg-header) solid;
        box-shadow: 4px 3px 6px 6px var(--sombra-inset);
    }

    .circulo {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 375px) {
    
    .vsVertical {
        font-size: 24pt;
    }

    .main__contLayout {
        width: 99%;
        height: 90vh;
        grid-template: 15% repeat(6,1fr) / repeat(5,1fr) 15%;
    }

    .circulo {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 320px) {
    .main__contLayout {
        grid-template: 15% repeat(6,1fr) / repeat(5,1fr) 15%;
        overflow: hidden;
    }

    .vsVertical {
        font-size: 16pt;
    }
}