.info-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

  }

  

  .info-grid-col {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

  }

  

  .info-grid-col:nth-child(1) .info-card {

    border-right-width: 1px;

    border-bottom-width: 1px;

  }

  

  .info-grid-col:nth-child(1) .info-card:last-child {

    border-bottom-width: 0;

  }

  

  .info-grid-col:nth-child(2) .info-card:nth-child(1) {

    border-bottom-width: 1px;

  }

  

  .info-grid-col:nth-child(2) .info-card:last-child {

    border-left-width: 1px;

  }

  

  .info-cells {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

  }

  

  .info-card {

    display: flex;

    position: relative;

    padding: 50px;

    transition: var(--def-transition);

    border: 0;

    border-style: solid;

    border-color: var(--acc-l-line-green);

    isolation: isolate;

    flex-flow: column;

  }

  

  .info-card.wide {

    grid-column: 1/-1;

  }

  

  .info-card:before {

    content: "";

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    bottom: 10px;

    background-color: var(--acc-d-green);

    border-radius: 30px;

    transition: var(--def-transition);

    opacity: 0;

    z-index: var(--zi-bg);

  }

  

  .info-card-link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: var(--zi-2);

  }

  

  .info-card-title {

    color: var(--clr-black);

    transition: var(--def-transition);

  }

  

  .info-card-text {

    margin-block: 20px;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5em;

    letter-spacing: 0.03em;

    color: var(--clr-d-gray);

  }

  

  .info-card-media {

    display: grid;

    margin-top: auto;

    padding-top: var(--tb-val-s);

  }

  

  .info-card-media > * {

    width: 100%;

    grid-area: 1/-1;

  }

  

  .info-card-media-img {

    z-index: var(--zi-1);

  }

  

  @media screen and (min-width: 553px) {

    .info-cells .info-card {

      border-right-width: 1px;

    }

  }

  

  @media screen and (min-width: 1025px) {

    .info-cells .info-card:nth-child(3n+3) {

      border-right-width: 0;

    }

  

    .info-cells .info-card:nth-child(n+4) {

      border-top-width: 1px;

    }

  }

  

  @media screen and (max-width: 1440px) {

    .info-card {

      padding: 40px;

    }

  

    .info-card-text {

      font-size: 14px;

    }

  }

  

  @media screen and (max-width: 1280px) {

    .info-grid .info-card {

      padding: 20px 10px;

    }

  

    .info-grid .info-card-title {

      padding-bottom: 20px;

    }

  

    .info-grid .info-card-text {

      display: none;

    }

  

    .info-grid .info-card-btn {

      margin-top: auto;

    }

  

    .info-grid .info-card-media-img,

    .info-grid .info-card-media-bg {

      max-height: 105px;

    }

  }

  

  @media screen and (max-width: 1024px) {

    .info-grid {

      margin-inline: auto;

      grid-template-columns: 1fr;

      max-width: 682px;

    }

  

    .info-grid-col:nth-child(1) .info-card:nth-child(2) {

      border-right-width: 0;

    }

  

    .info-grid-col:nth-child(1) .info-card:last-child {

      border-right-width: 0;

      border-bottom-width: 1px;

    }

  

    .info-grid-col:nth-child(2) .info-card:nth-child(1) {

      border-top-width: 1px;

      border-bottom-width: 0;

      order: 1;

    }

  

    .info-grid .info-card {

      padding: 16px 8px;

    }

  

    .info-grid .info-card-title {

      padding-bottom: 16px;

    }

  

    .info-grid .info-card-title br {

      display: none;

    }

  

    .info-grid .info-card-media-img,

    .info-grid .info-card-media-bg {

      max-height: 100%;

    }

  

    .info-cells {

      grid-template-columns: repeat(2, 1fr);

    }

  

    .info-card {

      padding: 32px 8px;

    }

  

    .info-card-text {

      margin-block: 16px;

      font-size: 12px;

    }

  }

  

  @media screen and (max-width: 768px) {

    .info-grid {

      max-width: 512px;

    }

  }

  

  @media screen and (max-width: 552px) {

    .info-grid .info-card-media {

      padding-top: 24px;

    }

  

    .info-cells {

      grid-template-columns: 1fr;

    }

  

    .info-cells .info-card:first-child {

      padding-top: 0;

    }

  

    .info-cells .info-card:not(:first-child) {

      border-top-width: 1px;

    }

  

    .info-card {

      padding-inline: 0;

    }

  

    .info-card-media {

      padding-top: 8px;

    }

  }

  

  @media screen and (min-width: 553px) and (max-width: 1024px) {

    .info-cells .info-card:nth-child(1),

    .info-cells .info-card:nth-child(2) {

      padding-top: 0;

    }

  

    .info-cells .info-card:nth-last-child(1),

    .info-cells .info-card:nth-last-child(2) {

      padding-bottom: 0;

    }

  

    .info-cells .info-card:nth-child(even) {

      border-right-width: 0;

    }

  

    .info-cells .info-card:nth-child(n+3) {

      border-top-width: 1px;

    }

  }

  

  @media (hover: hover) {

    .info-grid .info-card-text,

    .info-grid .info-card-btn {

      transition: var(--def-transition);

      opacity: 0;

    }

  

    .info-card:hover,

    .info-card:focus-within {

      color: var(--clr-white);

    }

  

    .info-card:hover:before,

    .info-card:focus-within:before {

      opacity: 1;

    }

  

    .info-card:hover .info-card-text,

    .info-card:hover .info-card-btn,

    .info-card:hover .info-card-media-bg,

    .info-card:focus-within .info-card-text,

    .info-card:focus-within .info-card-btn,

    .info-card:focus-within .info-card-media-bg {

      opacity: 1;

    }

  

    .info-card:hover .info-card-title,

    .info-card:hover .info-card-text,

    .info-card:hover .info-card-btn,

    .info-card:focus-within .info-card-title,

    .info-card:focus-within .info-card-text,

    .info-card:focus-within .info-card-btn {

      color: var(--clr-white);

    }

  

    .info-card:hover .info-card-btn:after,

    .info-card:focus-within .info-card-btn:after {

      background-color: var(--clr-white);

    }

  

    .info-card-media-bg {

      transition: var(--def-transition);

      opacity: 0;

    }

  }