.aspect-ratio {
  position: relative;
  padding-bottom: calc(100% / var(--aspect-ratio));
  width: 100%;
  height: 0;

  > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hidden-overflow {
  overflow: hidden;
}

.relative {
  position: relative;
}

.hide-on-desktop {
  @include desktop {
    display: none;
  }
}

.hide-on-mobile {
  @include mobile {
    display: none;
  }
}

html:not(.has-scroll-smooth) {
  .hide-on-native-scroll {
    display: none;
  }
}

html.has-scroll-smooth {
  .hide-on-smooth-scroll {
    display: none;
  }
}

.button {
  color: var(--green);
  font-size: mobile-vw(14px);
  padding: mobile-vw(4px) mobile-vw(8px);
  border-radius: mobile-vw(8px);
  border: 1px solid;
  text-transform: uppercase;
  transition: color 300ms var(--ease-out-expo),
    background-color 300ms var(--ease-out-expo);
  user-select: none;

  @include desktop {
    font-size: desktop-vw(16px);
    padding: desktop-vw(4px) desktop-vw(8px);
    border-radius: desktop-vw(8px);
  }

  @include hover {
    &:hover {
      color: var(--black);
      background-color: var(--green);
    }
  }
}
