.megamenu-card-container {
  display: flex;
  border-radius: 0.8rem;
  overflow: hidden;

  &.megamenu-card-container-row {
    flex-direction: row;
    > * {
      width: 50%;
    }
  }
  min-height: 19.5rem;
  grid-column-start: span 2;

  &.megamenu-card-container-column {
    flex-direction: column-reverse;
    .megamenu-card {
      max-height: 34rem;
    }
    > * {
      width: 100%;
    }
  }

  &.megamenu-card-container-left {
    gap: 16px 16px;
  }

  &.megamenu-card-container-left {
    order: 0;
  }
  &.megamenu-card-container-right {
    order: 1;
  }

  .megamenu-card {
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  &.megamenu-card-container-left {
    .megamenu-card-content {
      padding: 1.2rem 16px 16px 0;
    }
  }
  &.megamenu-card-container-right {
    .megamenu-card {
      img {
        object-fit: none;
        object-position: 0 calc((100vw - 375px) / (676 - 375) * -250 - 60px);
      }
    }
    .megamenu-card-content {
      padding: 16px;
    }
  }

  .megamenu-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    .megamenu-card-title {
      font-size: 2.4rem;
      font-weight: 440;
      line-height: 120%;
      letter-spacing: -0.48px;
      display: block;
    }

    .megamenu-card-description {
      font-size: 13px;
      letter-spacing: -0.13px;
      line-height: 130%;
      margin: 12px 0 20px;
    }

    .cta_html {
      .app_links {
        margin-top: 8px;
        a {
          display: inline-block;
          margin-right: 16px;
        }
      }
      .mobile_phone_image {
        position: absolute;
        left: calc((100vw - 375px) / (767 - 375) * 250 + 180px);
        top: 205px;
        top: calc((100vw - 375px) / (767 - 375) * -20 + 205px);
      }
    }

    .megamenu-card-button-image {
      display: flex;
      justify-content: center;
    }
  }
}
@media screen and (min-width: 768px) {
  .megamenu-card-container {
    max-width: calc(50% - 8px);
    &.megamenu-card-container-row {
      flex-direction: column;
      > * {
        flex: 1;
        width: 100%;
        max-height: calc(50% - 8px);
      }
    }
    &.megamenu-card-container-left {
      gap: 12px 12px;
      .megamenu-card-content {
        padding: 12px;
      }
    }
    &.megamenu-card-container-right.megamenu-card-container-column {
      flex-direction: column;
      .megamenu-card {
        height: calc(50% - 8px);
        img {
          object-fit: cover;
          object-position: center;
        }
      }
      .megamenu-card-content {
        height: 100%;
      }
      .mobile_phone_image {
        display: none;
      }
    }
    .megamenu-card-content {
      padding: 0 12px 8px;
    }
  }
}
@media screen and (min-width: 1200px) {
  .megamenu-card-container {
    flex: 1;
    max-width: 440px;

    &.megamenu-card-container-column {
      flex-direction: column-reverse;
    }
    &.megamenu-card-container-row {
      flex-direction: row;
      > * {
        flex: auto;
        width: auto;
        max-height: unset;
      }
    }
    &.megamenu-card-container-right.megamenu-card-container-column {
      flex-direction: row;

      .megamenu-card {
        width: 56%;
        height: 100%;
        overflow: hidden;
        img {
          object-fit: cover;
          scale: 1.2;
        }
      }
      .megamenu-card-content {
        width: 44%;
      }

      .megamenu-card-title {
        font-size: 2.2rem;
      }
      .mobile_phone_image {
        display: block;
        top: -17px;
        left: calc((100vw - 1200px) / (1440 - 1200) * -10 - 133px);
        scale: 0.75;
      }
    }
    .cta_html {
      .app_links {
        display: none;
      }
    }
    .megamenu-card-content {
      .megamenu-card-button-image img {
        scale: 0.8;
      }
    }
  }
}
@media screen and (min-width: 1300px) {
  .megamenu-card-container {
    &.megamenu-card-container-right.megamenu-card-container-column {
      .mobile_phone_image {
        scale: 0.8;
      }
    }
  }
}
@media screen and (min-width: 1440px) {
  .megamenu-card-container {
    &.megamenu-card-container-right.megamenu-card-container-column {
      .megamenu-card-title {
        font-size: 2.4rem;
      }
      .mobile_phone_image {
        left: -143px;
        scale: 0.85;
      }
    }
    &.megamenu-card-container-left.megamenu-card-container-row {
      .megamenu-card {
        width: 55%;
      }
      .megamenu-card-content {
        width: 45%;
      }
    }
  }
}