.triad {
  margin: 0;
}

.triad__items {
  border-top: var(--stripe);
  border-bottom: var(--stripe);
  margin: auto;
  max-width: var(--max);
  @media (min-width: 700px) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1180px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}

.triad__item {
  padding: var(--1);
  display: flex;
  flex-direction: column;
}

.triad__main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.triad__footer {
  margin-top: auto;
  padding-top: var(--1);
}

.triad__item:first-child {
  background: var(--color-secondary-or-base-bg);
  color: var(--color-secondary-or-base-fg);
  transition:
    background 0.25s,
    color 0.25s;
  grid-column: span 2;
  @media (min-width: 800px) {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
  }
  @media (max-width: 1180px) {
    grid-template-columns: auto auto;
    border-bottom: var(--stripe);
  }
  grid-gap: var(--1);
  > .triad__image {
    margin-top: auto;
  }
  > .triad__main {
    margin-top: auto;
    height: auto;
    > .triad__footer {
      margin-top: 0;
    }
  }
}

.triad__item:last-child {
  background: var(--color-tertiary-or-base-bg);
  transition:
    background 0.25s,
    color 0.25s;
  color: var(--color-tertiary-or-base-fg);
  @media (min-width: 700px) {
    border-left: var(--stripe);
  }
  @media (max-width: 699px) {
    border-top: var(--stripe);
  }
}

@media (min-width: 1181px) {
  .triad__item:nth-child(2) {
    border-left: var(--stripe);
  }
}

@media (min-width: 1920px) {
  .triad__items {
    border-left: var(--stripe);
    border-right: var(--stripe);
  }
}

.triad__image img {
  vertical-align: bottom;
  width: 100%;
  border-radius: var(--curvynes);
  transition: border-radius 0.25s;
  height: auto;
}

.triad__title {
  margin: var(--1) 0;
  font-size: 1.222rem;
  line-height: 1.2;
}