/* frame-layout-22 = home page text tiles container (col1-100) */
.text-media-tile {
  overflow: hidden;
  border-radius: var(--b-radius);
  transition: opacity 0.5s ease;
}

.frame-layout-22 .grid__col.-w100 {
  display: grid;
  grid-gap: var(--g-gap);
}

.tile__image {
  position: relative;
  height: 36vw;
  min-height: 150px;
}

.text-media-tile .tile__image img {
  width: 100%;
  max-width: inherit;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tile__textwrap {
  padding: 2rem 1.2rem;
  text-align: center;
  background-color: rgb(var(--c-neutral-lighter));
}

.content > div:nth-child(odd) .tile__textwrap {
  background-color: rgb(var(--c-neutral-lightest));
}

.text-media-tile .headline {
  margin-bottom: 19px;
}

.text-media-tile h2 {
  font-size: 125%;
  text-align: center;
}

.tile__more {
  margin-top: 1rem;
}

.tile__more a.font__button::after,
.tile__more a.font__button[rel]::after {
  content: none;
}

@media (hover: hover) {
  .tile__more a.font__button:hover {
    background: rgb(var(--c-secondary));
  }

  .frame-layout-22:has(.text-media-tile:hover) .text-media-tile:not(:hover) {
    opacity: 0.3;
  }
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 400px) {
  .tile__textwrap {
    padding: 2rem;
  }
}

@media (min-width: 640px) {
  .text-media-tile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 0;
  }

  .text-media-tile .tile__image {
    height: 100%;
  }

  .frame-layout-22 .grid__col.-w100 {
    grid-gap: 0;
  }

  .text-media-tile:nth-child(2n) {
    direction: rtl;
  }

  .text-media-tile:nth-child(2n) .tile__textwrap {
    direction: ltr;
  }

  .text-media-tile:first-child {
    border-top-left-radius: var(--b-radius);
    border-top-right-radius: var(--b-radius);
  }

  .text-media-tile:last-child {
    border-bottom-left-radius: var(--b-radius);
    border-bottom-right-radius: var(--b-radius);
  }

  .tile__textwrap {
    display: grid;
    align-content: center;
    padding: 2rem 1.2rem;
  }
}

@media (min-width: 800px) {
  .tile__textwrap {
    padding: 2rem;
  }

  .text-media-tile h2 {
    font-size: var(--f-size-l-3);
  }

  .text-media-tile {
    flex: 1;
  }

  .frame-layout-22 .grid__col.-w100 {
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 1280px) {
  .frame-layout-22 .grid__col.-w100 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .text-media-tile {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .text-media-tile:first-child {
    border-top-left-radius: var(--b-radius);
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--b-radius);
  }

  .text-media-tile:last-child {
    border-top-right-radius: var(--b-radius);
    border-bottom-right-radius: var(--b-radius);
    border-bottom-left-radius: 0;
  }

  .text-media-tile:nth-child(2n) .tile__textwrap {
    grid-row: 1;
  }

  .text-media-tile:nth-child(2n) .tile__image {
    grid-row: 2;
  }

  .tile__textwrap {
    padding: 2.5rem 2rem;
  }
}