[data-component-id="incmty:cards_in_columns"] {
  padding: 48px 16px;
  text-align: center;
  background-color: var(--bg-color);

  .card-in-column {
    + .card-in-column {
      margin-top: 24px;
    }
  }

  [data-component-id="incmty:headings"] {
    margin-bottom: 0;

    + .cards-in-columns__cards {
      margin-top: 24px;
    }
  }

  [data-component-id="incmty:headings"] {
    * {
      color: var(--midnight-color);
    }
  }

  .headings__title {
    font-size: 12px;
    line-height: 18px;
    /* 150% */
    font-weight: 900;
    text-transform: uppercase;
  }

  .headings__title,
  .headings__subtitle,
  .headings__description {
    text-align: inherit;
  }

  &.cards-in-columns--theme-heineken {
    .card-in-column__title {
      color: var(--text-color);
    }
  }

  &.cards-in-columns--bg-white {
    --bg-color: #ffffff;

    .card-in-column__info {
      border-left: 2px solid var(--gray-light-color);
      border-right: 2px solid var(--gray-light-color);
      border-bottom: 2px solid var(--gray-light-color);
    }

    .card-in-column.no-image {
      .card-in-column__info {
        border-top: 2px solid var(--gray-light-color);
      }
    }
  }

  &.cards-in-columns--bg-gray {
    --bg-color: #f2f2f2;
  }

  &.cards-in-columns--bg-midnight {
    --bg-color: #030219;
  }

  &.cards-in-columns--bg-blue {
    --bg-color: #122cde;
  }

  &.cards-in-columns--bg-orange {
    --bg-color: #d24204;
  }

  &.cards-in-columns--bg-light-green {
    --bg-color: #cfe253;
  }

  &.cards-in-columns--bg-lightblue {
    --bg-color: #a1c9ff;
    --midnight-color: #005d11;
  }

  &.cards-in-columns--bg-heineken-light-green {
    --bg-color: #a1e005;
  }

  &.cards-in-columns--bg-heineken-dark-green {
    --bg-color: #005d11;
  }

  &.cards-in-columns--bg-midnight,
  &.cards-in-columns--bg-blue,
  &.cards-in-columns--bg-orange,
  &.cards-in-columns--bg-heineken-dark-green {
    [data-component-id="incmty:headings"] {
      * {
        color: var(--white-color);
      }
    }
  }

  .cards-in-columns__cards {
    display: table;
    margin: 0 auto;
  }

  &.cards-in-columns--loading-slider {
    height: 400px;

    .cards-in-columns__cards {
      display: none !important;
    }
  }

  &.cards-in-columns--is-slider {
    &.at-least-one-card-has-btn-style-on-cta {
      .card-in-column {
        .card-in-column__padding {
          padding-bottom: 104px !important;
        }

        .card-in-column__padding {
          height: calc(100% - 108px);
        }
      }
    }

    .cards-in-columns__cards {
      display: block;
    }

    * + .cards-in-columns__cards {
      margin-top: 24px;
    }

    .slick-list {
      margin-left: -16px;
      margin-right: -16px;
      margin-bottom: 79px;

      .slick-slide {
        padding-left: 16px;
        padding-right: 8px;
        outline: 0;
        box-shadow: none;
      }
    }

    .card-in-column__inner {
      background-color: var(--white-color);
      border-radius: 24px;
      position: relative;
    }

    .card-in-column__cta-wrapper {
      position: absolute;
      left: 32px;
    }

    .card-in-column {
      max-width: none;

      + .card-in-column {
        margin-top: 0;
      }

      &.cta-style--btn {
        .card-in-column__cta-wrapper {
          bottom: 34px;
        }
      }

      &.cta-style--text {
        .card-in-column__padding {
          padding-bottom: 78px;
          height: calc(100% - 80px);
        }

        .card-in-column__cta-wrapper {
          bottom: 34px;
        }
      }
    }

    .card-in-column__info {
      background-color: transparent;
      padding-bottom: 0;
    }

    .slick-prev,
    .slick-next {
      outline: 0;
      box-shadow: none;
      transform: none;
      top: auto;
      bottom: -78px;
      height: 48px;
      width: 48px;

      &::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        height: 48px;
        width: 48px;
        border: 1px solid var(--text-color);
        background-color: var(--bg-color);
        opacity: 1;
        transition: all 0.3s ease;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        display: inline-block;
        transform: translateY(-50%);
        height: 48px;
        mask-size: 32px;
        mask-position: center;
        mask-repeat: no-repeat;
        background-image: none;
        background-color: var(--text-color);
        transition: all 0.3s ease;
      }
    }

    .slick-prev.slick-disabled,
    .slick-next.slick-disabled {
      pointer-events: none;

      &:before,
      &:after {
        opacity: 0.25;
      }
    }

    .slick-prev {
      left: calc(50% - 64px);

      &::after {
        width: 54px;
        mask-image: url(/themes/custom/incmty/images/svg/chevron-left.svg);
      }
    }

    .slick-next {
      right: calc(50% - 64px);
      left: auto;

      &::after {
        width: 48px;
        mask-image: url(/themes/custom/incmty/images/svg/chevron-right.svg);
      }
    }

    .card-in-column.no-image {
      .card-in-column__padding {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
      }
    }

    .card-in-column__image,
    .media--blazy,
    picture,
    img {
      background-color: var(--bg-color);
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
    }

    &.cards-in-columns--theme-base,
    &.cards-in-columns--theme-festival {
      &.cards-in-columns--bg-white,
      &.cards-in-columns--bg-gray {
        .slick-prev,
        .slick-next {
          @media (hover: hover) {
            &:hover {
              --bg-color: #030219;
              --text-color: #ffffff;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }

      &.cards-in-columns--bg-midnight {
        .slick-prev,
        .slick-next {
          --bg-color: #030219;
          --text-color: #ffffff;

          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #030219;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }
    }

    &.cards-in-columns--theme-base {
      &.cards-in-columns--bg-blue {
        .slick-prev,
        .slick-next {
          --bg-color: #122cde;
          --text-color: #ffffff;

          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #122cde;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }
    }

    &.cards-in-columns--theme-festival {
      &.cards-in-columns--bg-orange,
      &.cards-in-columns--bg-light-green {
        .slick-prev,
        .slick-next {
          --bg-color: #d24204;
          --text-color: #ffffff;

          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #d24204;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }
    }

    &.cards-in-columns--theme-heineken {
      &.cards-in-columns--bg-white,
      &.cards-in-columns--bg-gray {
        .slick-prev,
        .slick-next {
          --bg-color: #005d11;
          --text-color: #ffffff;

          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #005d11;
            }
          }
        }
      }

      &.cards-in-columns--bg-midnight {
        .slick-prev,
        .slick-next {
          --bg-color: #030219;
          --text-color: #ffffff;

          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #030219;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }

      &.cards-in-columns--bg-heineken-light-green {
        .slick-prev,
        .slick-next {
          --bg-color: #005d11;
          --text-color: #ffffff;

          &:before {
            border-color: var(--bg-color);
          }

          &:hover {
            --bg-color: #ffffff;
            --text-color: #005d11;

            &:before {
              border-color: var(--text-color);
            }
          }
        }
      }

      &.cards-in-columns--bg-heineken-dark-green {
        .slick-prev,
        .slick-next {
          --bg-color: #005d11;
          --text-color: #ffffff;
          @media (hover: hover) {
            &:hover {
              --bg-color: #ffffff;
              --text-color: #005d11;

              &:before {
                border-color: var(--bg-color);
              }
            }
          }
        }
      }
    }

    &.cards-in-columns--bg-white {
      .card-in-column__padding {
        border-left: 2px solid var(--gray-light-color);
        border-right: 2px solid var(--gray-light-color);
        border-bottom: 2px solid var(--gray-light-color);
        border-radius: 24px;
      }

      .card-in-column__info {
        border-left: none;
        border-right: none;
        border-bottom: none;
      }

      .card-in-column.no-image {
        .card-in-column__padding {
          border-top: 2px solid var(--gray-light-color);
          border-top-left-radius: 24px;
          border-top-right-radius: 24px;
        }

        .card-in-column__info {
          border-top: none;
        }
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  [data-component-id="incmty:cards_in_columns"] {
    .cards-in-columns__cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 24px;
      width: 100%;
    }

    &.cards-in-columns--wrap-cards-in-desktop {
      .cards-in-columns__cards {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .card-in-column {
      max-width: none;
      display: flex;
      flex-direction: column;

      + .card-in-column {
        margin-top: 0;
      }
    }

    .card-in-column__image {
      overflow: hidden;
      flex-shrink: 0;
    }

    .card-in-column__info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .card-in-column__description {
      flex-grow: 1;
    }

    .headings__subtitle {
      font-size: 32px;
      line-height: 38px;
      /* 118.75% */
    }

    &.cards-in-columns--is-slider {
      &.cards-in-columns--hide-controls-on-desktop {
        .slick-slider {
          padding-left: 0;
          padding-right: 0;
        }

        .slick-arrow {
          display: none;
        }
      }

      * + .cards-in-columns__cards {
        margin-top: 32px;
      }

      .slick-list {
        margin-left: -12px;
        margin-right: -12px;
        margin-bottom: 0;

        .slick-slide {
          padding-left: 12px;
          padding-right: 12px;
        }
      }

      .slick-slider {
        padding-left: 78px;
        padding-right: 78px;

        .slick-prev,
        .slick-next {
          top: 50%;
          transform: translateY(-50%);
        }

        .slick-prev {
          left: 0;
          right: auto;
        }

        .slick-next {
          left: auto;
          right: 0;
        }
      }
    }
  }
}

@media screen and (min-width: 1280px) {
  [data-component-id="incmty:cards_in_columns"] {
    padding: 96px;

    [data-component-id="incmty:headings"] {
      + .cards-in-columns__cards {
        margin-top: 48px;
      }
    }
  }
}