/* Geral */

.ratio-3x4 {
  --bs-aspect-ratio: calc(4 / 3 * 100%);
}

.ratio-9x16 {
  --bs-aspect-ratio: calc(16 / 9 * 100%);
}

.ratio-9x21 {
  --bs-aspect-ratio: calc(21 / 9 * 100%);
}

.w-100 {
  width: 100% !important;
}

.ratio>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: calc(16 / 9 * 100%);
  content: "";
}

.p-4 {
  padding: 0.75rem !important;
}

.mx-n2 {
  margin-right: -0.25rem !important;
  margin-left: -0.25rem !important;
}



.align-items-center {
  align-items: center !important;
}

.px-0 {
    padding-right: 0!important;
    padding-left: 0!important
}

.px-1 {
    padding-right: .125rem!important;
    padding-left: .125rem!important
}

.px-2 {
    padding-right: .25rem!important;
    padding-left: .25rem!important
}

.px-3 {
    padding-right: .5rem!important;
    padding-left: .5rem!important
}

.px-4 {
    padding-right: .75rem!important;
    padding-left: .75rem!important
}

.px-5 {
    padding-right: 1rem!important;
    padding-left: 1rem!important
}

.px-6 {
    padding-right: 1.25rem!important;
    padding-left: 1.25rem!important;
}

.px-7 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important
}

.px-8 {
    padding-right: 1.75rem!important;
    padding-left: 1.75rem!important
}

.px-9 {
    padding-right: 2rem!important;
    padding-left: 2rem!important
}

.px-10 {
    padding-right: 2.5rem!important;
    padding-left: 2.5rem!important
}

.px-11 {
    padding-right: 3rem!important;
    padding-left: 3rem!important
}

.px-12 {
    padding-right: 4rem!important;
    padding-left: 4rem!important
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}


.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}


.lh-sm {
  line-height: 1.25 !important;
}

.m-0 {
  margin: 0 !important;
}

.small,
small {
  font-size: .875em;
}

/* Splide */

.splide__arrow--prev,
.splide__arrow--next {
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  background: var(--flickity-arrow-color);
  opacity: 1;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}

.splide__arrow--prev:hover,
.splide__arrow--next:hover {
  background: var(--flickity-arrow-color-hover);
}

.splide__arrow--prev svg,
.splide__arrow--next svg {
  position: relative;
  width: 15px;
  height: 15px;
  fill: var(--secondary-background);
  vertical-align: middle;
}