Edition

$edition-font-size: $font-size-base;

//Edition Label for Artist Collabo
.edition-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-bottom: $spacer-sm;
  text-align: center;
}

.edition-separator {
  transform: rotate(90deg);
  margin-bottom: $spacer-lg;
  border: 0;
  background-color: $brand-gray;
  width: $spacer-xl;
  height: 1px;
}

.edition {
  @extend %heading-font-bold;

  margin-bottom: $spacer-xs;
  text-transform: uppercase;
  color: $brand-gray;
  font-size: $font-size-md;
}

.edition-date {
  @extend %heading-font-heavy;

  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: $font-size-xxl;

  &--edition-1 {
    color: $brand-blue;
  }

  &--edition-2 {
    color: $brand-petrol;
  }
}

.edition-date-separator {
  transform: rotate(90deg);
  margin: $spacer-sm 0;
  border: 0;
  background-color: $brand-red;
  min-width: $spacer-base;
  height: 5px;

  &--edition-2 {
    background-color: $brand-apricot;
  }
}

// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .edition-section {
    margin-bottom: $spacer-xxs;
  }

  .edition {
    font-size: $font-size-lg;
  }

  .edition-separator {
    margin-bottom: $spacer-xl;
    width: ms(20);
  }

  .edition-date {
    flex-direction: row;
    font-size: $font-size-xxxxl;
  }

  .edition-date-separator {
    transform: rotate(0deg);
    margin: 0 $spacer-xxs;
    height: 8px;
  }
}