/* xl */
.container {
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}
.container.h-100 {
    height: 100%;
}
.grid {
    display: grid;
}
.grid.v-center {
    align-items: center;
}
.grid.xl-1{
    grid-template-columns: 1fr;
}
.grid.xl-2{
    grid-template-columns: repeat(2, 1fr);
}
.grid.xl-3{
    grid-template-columns: repeat(3, 1fr);
}
.grid.xl-4{
    grid-template-columns: repeat(4, 1fr);
}
.hidden-xl {
    display: none;
}

/* lg */
@media (max-width: 1199.98px) {
    .container {
        max-width: 992px;
    }
    .grid.lg-1{
        grid-template-columns: 1fr;
    }
    .grid.lg-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.lg-4{
        grid-template-columns: repeat(4, 1fr);
    }
    .hidden-lg {
        display: none;
    }
    .visible-lg {
        display: block;
    }
}
/* md */
@media (max-width: 991.98px) {
    .container {
        max-width: 768px;
    }
    .grid.md-1{
        grid-template-columns: 1fr;
    }
    .grid.md-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.md-3{
        grid-template-columns: repeat(3, 1fr);
    }
    .grid.md-4{
        grid-template-columns: repeat(4, 1fr);
    }
    .hidden-md {
        display: none;
    }
    .visible-md {
        display: block;
    }
}
/* sm */
@media (max-width: 767.98px) {
    .container {
        max-width: 576px;
    }
    .grid.sm-1{
        grid-template-columns: 1fr;
    }
    .grid.sm-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.sm-4{
        grid-template-columns: repeat(4, 1fr);
    }
    .hidden-sm {
        display: none;
    }
    .visible-sm {
        display: block;
    }
}
/* xs */
@media (max-width: 575.98px) {
    .container {
        max-width: 100%;
    }
    .grid.xs-1{
        grid-template-columns: 1fr;
    }
    .grid.xs-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.xs-4{
        grid-template-columns: repeat(4, 1fr);
    }
    .hidden-xs {
        display: none;
    }
    .visible-xs {
        display: block;
    }
}