:root {
  --desktop-viewport: 1200px;
  --tablet-viewport: 768px;
}

@layer layouts {
  @media screen and (min-width: 768px) {
    .cards__list {
      --gap: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
    }
  }
  .cards__item {
    padding: 32px 24px 0;
    border-radius: 32px;
    position: relative;
    margin-bottom: 28px;
    overflow: hidden;
  }
  @media screen and (min-width: 768px) {
    .cards__item {
      width: calc((100% - var(--gap) * (2 - 1)) / 2);
    }
  }
  @media screen and (min-width: 992px) {
    .cards__item {
      padding: 48px 32px 0;
      width: calc((100% - var(--gap) * (3 - 1)) / 3);
      min-height: 564px;
    }
  }
  .cards__item--full-img img {
    width: 100%;
    right: 0;
    transform: none;
    max-width: none;
  }
  .cards__item--blue {
    background: #E2EEF7;
  }
  .cards__item--yellow {
    background: #f9f3e9;
  }
  .cards__item--pink {
    background: #FFF1F5;
  }
  .cards__item--green {
    background: #E6F3EE;
  }
  .cards__text {
    padding-bottom: 97%;
  }
  @media screen and (max-width: 374.9px) {
    .cards__text {
      padding-bottom: 110%;
    }
  }
  @media screen and (min-width: 992px) {
    .cards__text {
      padding-bottom: 150%;
    }
  }
  @media screen and (min-width: 1200px) {
    .cards__text {
      padding-bottom: 120%;
    }
  }
  .cards__text h3:not(:last-child) {
    margin-bottom: 28px;
  }
  .cards__img {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    max-width: 210px;
  }
  @media screen and (min-width: 992px) {
    .cards__img {
      left: auto;
      transform: none;
      right: 32px;
      width: -moz-min-content;
      width: min-content;
      max-width: none;
    }
  }
  .cards__footnote {
    margin-top: 24px;
    text-align: center;
    color: #4c6376;
    font-size: 12px;
  }
  @media screen and (min-width: 992px) {
    .cards__footnote {
      font-size: 16px;
    }
  }
  .cards__footnote a {
    background-position: 100% 100%, 0 100%, 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px, 0 2px, 0 2px;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent, transparent), linear-gradient(currentColor, currentColor);
  }
  @media (hover: hover) {
    .cards__footnote a:hover {
      animation-duration: 0.8s;
      animation-timing-function: ease-in-out;
      animation-name: back-text;
      animation-fill-mode: forwards;
      background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent, transparent), linear-gradient(currentColor, currentColor);
    }
  }
  @keyframes back-text {
    0% {
      background-size: 100% 2px, 0 2px, 0 2px;
    }
    100% {
      background-size: 0 2px, 100% 2px, 0 2px;
    }
  }
  .cards__footnote--mobile:not(:last-child) {
    margin-bottom: 24px;
  }
  @media screen and (min-width: 768px) {
    .cards__footnote--mobile {
      display: none;
    }
  }
  .cards__footnote--desktop {
    display: none;
  }
  @media screen and (min-width: 768px) {
    .cards__footnote--desktop {
      display: block;
    }
  }
  .cards__button {
    margin-top: 28px;
  }
  @media screen and (min-width: 992px) {
    .cards__button {
      margin-top: 80px;
    }
  }
}