:root{
  --4px: 0.25rem;
  --6px: 0.375rem;
  --8px: 0.5rem;
  --10px: 0.625rem;
  --12px: 0.75rem;
  --14px: 0.875rem;
  --16px: 1rem;
  --18px: 1.125rem;
  --20px: 1.25rem;
  --22px: 1.375rem;
  --24px: 1.5rem;
  --26px: 1.625rem;
  --32px: 2rem;
  --36px: 2.25rem;
  --38px: 2.375rem;
  --40px: 2.5rem;
  --42px: 2.625rem;
  --44px: 2.75rem;
  --50px: 3.125rem;
  --52px: 3.25rem;
  --60px: 3.75rem;
  --122px: 7.625rem;
}

.m-42 {
  margin: var(--42px)
}
.mt-42, .my-42 {
  margin-block-start: var(--42px)
}
.mr-42, .mx-42 {
  margin-inline-end: var(--42px)
}
.mb-42, .my-42 {
  margin-block-end: var(--42px)
}
.ml-42, .mx-42 {
  margin-inline-start: var(--42px)
}

.m-12 {
  margin: var(--12px)
}
.mt-12, .my-12 {
  margin-block-start: var(--12px)
}
.mr-12, .mx-12 {
  margin-inline-end: var(--12px)
}
.mb-12, .my-12 {
  margin-block-end: var(--12px)
}
.ml-12, .mx-12 {
  margin-inline-start: var(--12px)
}

.p-12 {
  padding: var(--12px)
}

.pt-12, .py-12 {
  padding-block-start: var(--12px)
}

.pr-12, .px-12 {
  padding-inline-end: var(--12px)
}

.pb-12, .py-12 {
  padding-block-end: var(--12px)
}

.pl-12, .px-12 {
  padding-inline-start: var(--12px)
}
.rounded-42 {
  border-radius: 42px;
}

.rounded-24 {
  border-radius: 24px;
}
@media (min-width:62em){
  .m-md-42 {
    margin: var(--42px)
  }

  .mt-md-42, .my-md-42 {
    margin-block-start: var(--42px)
  }

  .mr-md-42, .mx-md-42 {
    margin-inline-end: var(--42px)
  }

  .mb-md-42, .my-md-42 {
    margin-block-end: var(--42px)
  }

  .ml-md-42, .mx-md-42 {
    margin-inline-start: var(--42px)
  }

  .m-md-12 {
    margin: var(--12px)
  }
  .mt-md-12, .my-md-12 {
    margin-block-start: var(--12px)
  }
  .mr-md-12, .mx-md-12 {
    margin-inline-end: var(--12px)
  }
  .mb-md-12, .my-md-12 {
    margin-block-end: var(--12px)
  }
  .ml-md-12, .mx-md-12 {
    margin-inline-start: var(--12px)
  }

  .rounded-md-42{
    border-radius: 42px;
  }
  .rounded-md-24 {
    border-radius: 24px;
  }
}
.line-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.mobile{
 display: none !important;
}
.tablet {
  display: none !important;
}

.desktop{
  display: block !important;
}
.desktop.d-flex{
  display: flex !important;
}

:is(a, button):hover .no-hover,
:is(a, button) .with-hover {
  display: none;
}

:is(a, button) .no-hover,
:is(a, button):hover .with-hover,
:is(a, button) .with-hover:hover {
  display: inline-flex;
}

@media all and (max-width: 62em) {
  .mobile{
    display: block !important;
  }
  .mobile.d-flex{
    display: flex !important;
  }
  .desktop.d-flex,
  .desktop {
    display: none !important;
  }
}
@media all and (max-width: 70em) {
  .tablet {
    display: block !important;
  }
    .tablet.d-flex {
      display: flex !important;
    }
}