/* Classes gerais de altura e largura (default) */
.vh-10 { height: 10vh; }
.vh-20 { height: 20vh; }
.vh-25 { height: 25vh; }
.vh-30 { height: 30vh; }
.vh-40 { height: 40vh; }
.vh-50 { height: 50vh; }
.vh-60 { height: 60vh; }
.vh-70 { height: 70vh; }
.vh-75 { height: 75vh; }
.vh-80 { height: 80vh; }
.vh-90 { height: 90vh; }
.vh-100 { height: 100vh; }

.vw-10 { width: 10vw; }
.vw-20 { width: 20vw; }
.vw-25 { width: 25vw; }
.vw-30 { width: 30vw; }
.vw-40 { width: 40vw; }
.vw-50 { width: 50vw; }
.vw-60 { width: 60vw; }
.vw-70 { width: 70vw; }
.vw-75 { width: 75vw; }
.vw-80 { width: 80vw; }
.vw-90 { width: 90vw; }
.vw-100 { width: 100vw; }

/* Media queries para sm (≥576px) */
@media (min-width: 576px) {
    .sm-vh-10 { height: 10vh; }
    .sm-vh-20 { height: 20vh; }
    .sm-vh-25 { height: 25vh; }
    .sm-vh-30 { height: 30vh; }
    .sm-vh-40 { height: 40vh; }
    .sm-vh-50 { height: 50vh; }
    .sm-vh-60 { height: 60vh; }
    .sm-vh-70 { height: 70vh; }
    .sm-vh-75 { height: 75vh; }
    .sm-vh-80 { height: 80vh; }
    .sm-vh-90 { height: 90vh; }
    .sm-vh-100 { height: 100vh; }

    .sm-vw-10 { width: 10vw; }
    .sm-vw-20 { width: 20vw; }
    .sm-vw-25 { width: 25vw; }
    .sm-vw-30 { width: 30vw; }
    .sm-vw-40 { width: 40vw; }
    .sm-vw-50 { width: 50vw; }
    .sm-vw-60 { width: 60vw; }
    .sm-vw-70 { width: 70vw; }
    .sm-vw-75 { width: 75vw; }
    .sm-vw-80 { width: 80vw; }
    .sm-vw-90 { width: 90vw; }
    .sm-vw-100 { width: 100vw; }
}

/* Media queries para md (≥768px) */
@media (min-width: 768px) {
    .md-vh-10 { height: 10vh; }
    .md-vh-20 { height: 20vh; }
    .md-vh-25 { height: 25vh; }
    .md-vh-30 { height: 30vh; }
    .md-vh-40 { height: 40vh; }
    .md-vh-50 { height: 50vh; }
    .md-vh-60 { height: 60vh; }
    .md-vh-70 { height: 70vh; }
    .md-vh-75 { height: 75vh; }
    .md-vh-80 { height: 80vh; }
    .md-vh-90 { height: 90vh; }
    .md-vh-100 { height: 100vh; }

    .md-vw-10 { width: 10vw; }
    .md-vw-20 { width: 20vw; }
    .md-vw-25 { width: 25vw; }
    .md-vw-30 { width: 30vw; }
    .md-vw-40 { width: 40vw; }
    .md-vw-50 { width: 50vw; }
    .md-vw-60 { width: 60vw; }
    .md-vw-70 { width: 70vw; }
    .md-vw-75 { width: 75vw; }
    .md-vw-80 { width: 80vw; }
    .md-vw-90 { width: 90vw; }
    .md-vw-100 { width: 100vw; }
}

/* Media queries para lg (≥992px) */
@media (min-width: 992px) {
    .lg-vh-10 { height: 10vh; }
    .lg-vh-20 { height: 20vh; }
    .lg-vh-25 { height: 25vh; }
    .lg-vh-30 { height: 30vh; }
    .lg-vh-40 { height: 40vh; }
    .lg-vh-50 { height: 50vh; }
    .lg-vh-60 { height: 60vh; }
    .lg-vh-70 { height: 70vh; }
    .lg-vh-75 { height: 75vh; }
    .lg-vh-80 { height: 80vh; }
    .lg-vh-90 { height: 90vh; }
    .lg-vh-100 { height: 100vh; }

    .lg-vw-10 { width: 10vw; }
    .lg-vw-20 { width: 20vw; }
    .lg-vw-25 { width: 25vw; }
    .lg-vw-30 { width: 30vw; }
    .lg-vw-40 { width: 40vw; }
    .lg-vw-50 { width: 50vw; }
    .lg-vw-60 { width: 60vw; }
    .lg-vw-70 { width: 70vw; }
    .lg-vw-75 { width: 75vw; }
    .lg-vw-80 { width: 80vw; }
    .lg-vw-90 { width: 90vw; }
    .lg-vw-100 { width: 100vw; }
}

/* Media queries para xl (≥1200px) */
@media (min-width: 1200px) {
    .xl-vh-10 { height: 10vh; }
    .xl-vh-20 { height: 20vh; }
    .xl-vh-25 { height: 25vh; }
    .xl-vh-30 { height: 30vh; }
    .xl-vh-40 { height: 40vh; }
    .xl-vh-50 { height: 50vh; }
    .xl-vh-60 { height: 60vh; }
    .xl-vh-70 { height: 70vh; }
    .xl-vh-75 { height: 75vh; }
    .xl-vh-80 { height: 80vh; }
    .xl-vh-90 { height: 90vh; }
    .xl-vh-100 { height: 100vh; }

    .xl-vw-10 { width: 10vw; }
    .xl-vw-20 { width: 20vw; }
    .xl-vw-25 { width: 25vw; }
    .xl-vw-30 { width: 30vw; }
    .xl-vw-40 { width: 40vw; }
    .xl-vw-50 { width: 50vw; }
    .xl-vw-60 { width: 60vw; }
    .xl-vw-70 { width: 70vw; }
    .xl-vw-75 { width: 75vw; }
    .xl-vw-80 { width: 80vw; }
    .xl-vw-90 { width: 90vw; }
    .xl-vw-100 { width: 100vw; }
}