/* default: mobile first */
.ar-16-9 {
  aspect-ratio: 1 / 1.25;
}

.ar-20-9 {
  aspect-ratio: 1 / 1.25;
}

.ar-4-3 {
  aspect-ratio: 1 / 1.25;
}

.frame-width {
  aspect-ratio: 1/1.25;
  width: 100%;
}

.ar-full-w {
  width: 100%;
  aspect-ratio: 1 / 1.25;
  height: auto;
}

.ar-full {
  width: 100%;
  height: 100vh;
}

.w-textarea {
  width: 100%
}

/* 768px and up */
@media (min-width: 768px) {
  .ar-16-9 {
    aspect-ratio: 16 / 9;
  }

  .ar-20-9 {
    aspect-ratio: 20 / 9;
  }

  .ar-4-3 {
    aspect-ratio: 4 / 3;
  }

  .ar-full-w {
    aspect-ratio: auto;
    height: 700px;
  }

  .w-textarea {
    width: 50%
  }
}

/* 1500px and up */
@media (min-width: 1500px) {
  .frame-width {
    width: 1500px;
  }
}