.turn {
  max-width: var(--max);
  margin: var(--vertical-outer) auto;
  padding: 0 var(--2);
}

.turn__items {
  display: flex;
  flex-direction: column;
  grid-gap: var(--1);
}

@media (min-width: 600px) {
  .turn__item {
    display: grid;
    grid-template-columns: 8fr 28fr 44fr;
    grid-template-areas: '. text image';
    max-width: var(--max);
  }

  .turn--flipped {
    grid-template-columns: 44fr 28fr 8fr;
    grid-template-areas: 'image text .';
    .turn__tag {
      text-align: right;
    }
  }
}

@media (max-width: 599px) {
  .turn__item {
    border-radius: var(--curvynes);
    background: var(--color-secondary-or-base-bg);
    color: var(--color-secondary-or-base-fg);
    overflow: hidden;
  }
}

.turn__text {
  background: var(--color-secondary-or-base-bg);
  color: var(--color-secondary-or-base-fg);
  grid-area: text;
  padding: var(--1);
  position: relative;
  border-radius: var(--curvynes) 0 0 var(--curvynes);
  &::before {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-left: var(--stripe);
    border-top: var(--stripe);
  }
  @media (min-width: 600px) {
    border-bottom: var(--stripe);
  }
  @media (max-width: 599px) {
    &::before {
      border-right: var(--stripe);
    }
  }
}

.turn--flipped > .turn__text {
  border-radius: 0 var(--curvynes) var(--curvynes) 0;
  @media (min-width: 600px) {
    &::before {
      border-left: 0;
      border-right: var(--stripe);
    }
  }
}

.turn__image {
  grid-area: image;
  display: flex;
  img {
    width: 100%;
    vertical-align: bottom;

    @media (min-width: 600px) {
      object-fit: cover;
      border-radius: 0 var(--curvynes) var(--curvynes) 0;
      .turn--flipped & {
        border-radius: var(--curvynes) 0 0 var(--curvynes);
      }
    }
  }
}

.turn__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.turn__tag {
  font: var(--huge);
  margin-bottom: 1em;
}

.turn__title {
  margin: 0;
  font: var(--big);
}