.quarter {
  padding: var(--op-space-x-small);
  width: 100%;

  height: 42rem;
  display: flex;
  overflow-x: scroll;
  justify-content: space-around;
  gap: var(--op-space-small);
  scrollbar-width: none;  /* Firefox */
  border-radius: var(--op-radius-x-large);

  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    flex-direction: column;
    height: 100%;
    align-items: center;
    overflow-x: hidden;
    padding: var(--op-space-3x-small) 0;
  }
}

.quarter--1, .quarter--2, .quarter--3, .quarter--4 {
  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    background: unset;
  }
}