.cards-container {
  margin-bottom: 50px;

  a {
    color: inherit;
    text-decoration: none;
  }

  h3 {
    padding: 20px 0 10px 0;
  }

  .card-element {
    .open-icon {
      margin: 20px 0;
      display: block;
      align-self: flex-end;
      font-size: 46px;
      cursor: pointer;
    }

    .card-text {
      display: none;
    }


    .image-container {
      position: relative;
      border-radius: 50px;
      width: 100%;
      height: 330px;
      overflow: hidden;
    }

    .image-container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: inherit;
      background-size: cover;
      background-position: center;
      transition: transform 1s ease;
      transform: scale(1);
    }

    .image-container:hover::before {
      transform: scale(1.1);
    }

    &.rows-3 {
      border-radius: 50px;
    }

    &.rows-2 {
      border-radius: 80px;
    }
  }

  .green {
    background-color: $light_green;
    border: 30px solid $light_green;
  }

  .m_green {
    background-color: $medium_green;
    border: 30px solid $medium_green;
  }

  .orange {
    background-color: $light_orange;
    border: 30px solid $light_orange;
  }

  .m_orange {
    background-color: $medium_orange;
    border: 30px solid $medium_orange;
  }

  .blue {
    background-color: $light_blue;
    border: 30px solid $light_blue;
  }

  .m_blue {
    background-color: $medium_blue;
    border: 30px solid $medium_blue;
  }

  .icon-green {
    width: 50px;
    height: 50px;
    background-color: $dark-green;
    position: absolute;
    right: 25px;
    bottom: 25px;
    border-radius: 100px;
    color: $white;
    text-align: center;
    font-size: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon-orange {
    width: 50px;
    height: 50px;
    background-color: $dark-orange;
    position: absolute;
    right: 25px;
    bottom: 25px;
    border-radius: 100px;
    color: $white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon-blue {
    width: 50px;
    height: 50px;
    background-color: $dark-blue;
    position: absolute;
    right: 25px;
    bottom: 25px;
    border-radius: 100px;
    color: $white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rows-2 {
    grid-template-columns: repeat(4, 1fr);

    .image-container {
      position: relative;
      border-radius: 50px;
      width: 100%;
      height: 330px;
    }

    @media (min-width: $breakpoint_lg) {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .rows-3 {
    grid-template-columns: repeat(4, 1fr);

    .image-container {
      position: relative;
      border-radius: 30px;
      width: 100%;
      height: 200px;
    }
  }
}