/*
xs: 576px,
sm: 768px,
md: 992px,
lg: 1200px
*/
/*

Custom Utilities

*/
/* Visibility */
.hidden {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 64rem) {
  .m-lg-only {
    display: none !important;
  }
}

@media (max-width: 63rem) {
  .m-md-only {
    display: none !important;
  }
}

/*Transition*/
.transition {
  transition: all 0.2s ease-in;
}

.transition-slow {
  transition: all 0.5s ease-out;
}

/* Dimensions */
.w-100 {
  width: 100%;
}

/* Spacing */
.m-0 {
  margin: 0 !important;
}

.mr-auto {
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mt-1 {
  margin-top: var(--spacer);
}

.mt-2 {
  margin-top: calc(var(--spacer) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacer) * 3);
}

.p-0 {
  padding: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.remain-height {
  min-height: calc(100vh - 74px);
}

/* Aspect Ratio */
[class*=aspect-ratio-] {
  display: block;
  position: relative;
  width: 100%;
}

[class*=aspect-ratio-] > * {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.aspect-ratio-wide {
  padding-top: 65%;
}

.aspect-ratio-square {
  padding-top: 100%;
}

/* Centering with Translate */
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* z-index */
.z-3 {
  z-index: 3;
}

/* Overflow */
.ov-h {
  overflow: hidden;
}

/* Border */
.b-1 {
  border: 1px solid var(--grey);
}

.bT-1 {
  border-top: 1px solid var(--grey);
}

.bB-1 {
  border-bottom: 1px solid var(--grey);
}

.bL-1 {
  border-left: 1px solid var(--grey);
}

.bR-1 {
  border-right: 1px solid var(--grey);
}

.b-3 {
  border: 3px solid var(--grey);
}

.bT-3 {
  border-top: 3px solid var(--grey);
}

.bT-3-b {
  border-top: 3px dashed var(--black);
}

.bB-3 {
  border-bottom: 3px solid var(--grey);
}

.bL-3 {
  border-left: 3px solid var(--grey);
}

.bR-3 {
  border-right: 3px solid var(--grey);
}

.b-3 {
  border: 3px solid var(--grey);
}

.bT-3 {
  border-top: 3px solid var(--grey);
}

.bB-3 {
  border-bottom: 3px solid var(--grey);
}

.bL-3 {
  border-left: 3px solid var(--grey);
}

.bR-3 {
  border-right: 3px solid var(--grey);
}

/*colors*/
.bg-light-grey {
  background: var(--light-grey);
}

.bg-pink {
  background: var(--pink);
}

.bg-light-yellow {
  background: var(--light-yellow);
}