.quarter {
  padding: var(--op-space-x-small);
  scroll-padding: var(--op-space-small);
  width: 100%;
  border-radius: var(--op-radius-2x-large);
  contain: unset;
  background-color: #708F89;

  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    padding: 0;
    background-color: transparent;
  }
}

.quarter__container {
  border-radius: var(--op-radius-2x-large);
  overflow-x: scroll;
  padding: var(--op-space-2x-small);
  display: flex;
  justify-content: space-around;
  gap: var(--op-space-small);
  scrollbar-width: none;  /* Firefox */

  @media only screen and (max-width: 768px) {
    overflow-x: unset;
    flex-wrap: wrap;
    padding: var(--op-space-3x-small);
  }
}

.quarters__container {
  display: flex;
  gap: var(--op-space-medium);
  flex-direction: column;
  padding-bottom: var(--op-space-3x-large);

  @media only screen and (max-width: 768px) {
    align-items: center;
  }
}