.shelf {
  margin: var(--vertical-outer) 0;
}

@media (min-width: 1200px) {
  .shelf__main {
    margin: auto;
    max-width: var(--max);
    display: grid;
    grid-template-columns: 34fr 20fr 26fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 'intro first second' 'intro first third';
  }
}

.shelf__intro {
  grid-area: intro;
  padding: var(--2) var(--2);
  @media (min-width: 1200px) {
    padding: var(--1) var(--4) var(--1) var(--6);
  }
}

.shelf__items {
  @media (min-width: 1200px) {
    display: contents;
  }
  @media (max-width: 1199px) {
    overflow: hidden;
    border-radius: var(--curvynes);
    margin: 0 var(--2);
  }
}

.shelf__item {
  padding: var(--3);
  grid-area: second;
  background: var(--color-tertiary-or-base-bg);
  color: var(--color-tertiary-or-base-fg);
  transition:
    background 0.25s,
    color 0.25s;
  display: grid;
  @media (min-width: 600px) {
    grid-template-columns: auto 1fr;
    grid-gap: var(--3);
  }
  @media (max-width: 599px) {
    grid-template-rows: auto auto;
    grid-gap: var(--1);
  }
  @media (max-width: 1199px) {
    border-left: var(--stripe);
    border-right: var(--stripe);
  }
  @media (min-width: 1200px) {
    border-top: var(--stripe);
    border-right: var(--stripe);
  }
}

.shelf__item:first-child {
  grid-area: first;
  background: var(--color-primary-bg);
  color: var(--color-primary-fg);
  @media (min-width: 1200px) {
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
    border-radius: var(--curvynes) 0 0 var(--curvynes);
    .shelf__icon {
      margin-bottom: 0;
    }
  }
}

.shelf__item:last-child {
  grid-area: third;
  border-top: var(--stripe);
  background: var(--color-secondary-or-base-bg);
  color: var(--color-secondary-or-base-fg);
  transition:
    background 0.25s,
    color 0.25s;
  @media (max-width: 1199px) {
    border-bottom: var(--stripe);
  }
  @media (min-width: 1200px) {
    border-bottom: var(--stripe);
  }
}

.shelf__icon {
  margin: auto 0;
  text-align: center;
  font-weight: 100;
  font-family: var(--icons);
  font-size: 8.3rem;
  text-align: left;
  min-width: var(--4);
  &[data-icon]::before {
    content: attr(data-icon);
    line-height: 0.535;
    display: block;
    transform: translateY(-12.4%);
  }
}

.shelf__item-main {
  margin: auto 0;
}

.shelf__item-title {
  margin: 0 0 var(--1) 0;
}

.shelf__intro-bottom {
  margin-top: var(--1);
}

.shelf__prefix {
  padding-right: calc(var(--1) * 8);
}