@import './mixins';

.wrapper {
  display: flex;
  margin: auto;
  position: relative;
  flex-direction: column;
  padding: 0;
  background: rgb(240, 245, 250);
  height: auto;
  overflow-x: hidden;
  .content {
    width: 95.8%;
    height: 100%;
    margin-left: 4.2%;
    margin-bottom: 5%;
    position: relative;
    .container1440;
  }
  .title {
    font-size: 2.8em;
    padding-left: 4.06%;
    font-weight: 500;
    margin: 48px 0 0 0;
    position: relative;
    height: min-content;
    color: #fff;
  }
  .slicerbarv {
    display: none;
  }
  .slicerbarv2 {
    display: none;
  }
  .lefttop {
    background: linear-gradient(
      130deg,
      fade(@primary-color, 70%),
      shade(@primary-color, 20%)
    );
    width: 100%;
    top: 0;
    position: absolute;
  }
  .lefttopWithTitle {
    height: 60%;
  }
  .lefttopWithoutTitle {
    height: 75%;
  }
  .rightbottom {
    position: absolute;
    width: 95.83%;
    left: 4.17%;
    top: 144px;
    background: #fff;
    height: 65%;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
  }
  .rightbottomWithoutTitle {
    top: 48px;
    height: 75%;
  }
  .cardsContainer {
    width: 100%;
    height: 65%;
    margin-top: 48px;
    position: relative;
    .cards {
      display: flex;
      text-align: center;
      position: relative;
      width: -webkit-fill-available;
      flex-wrap: wrap;
      margin-left: 4.06%;
      .cardWrapper {
        margin: 68px 0 93px 0;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        &:last-child {
          border-right: 0px;
        }
      }
    }
  }
}
.dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d8d8d8;
  display: none;
}

@media (max-width: 768px) {
  .wrapper {
    width: 100%;
    .lefttop {
      left: 0px;
      height: 100%;
      width: 100%;
    }
    .rightbottom {
      height: 79.5%;
      margin-top: 48px;
      .slicerbarv {
        position: absolute;
        background-color: #f2f4f5;
        width: 1px;
        height: 100%;
        margin-left: 3%;
        display: block;
        z-index: 1;
      }
      .slicerbarv2 {
        margin-left: 92.2%; // 1 - (0.96 * 0.04 + 0.04)
      }
      .slicerbarh {
        position: absolute;
        background-color: #f2f4f5;
        width: 100%;
        height: 1px;
        display: block;
        margin-top: 45px;
      }
      .slicerbarh2 {
        margin-top: 395px;
      }
      .slicerbarh3 {
        margin-top: 745px;
      }
      .slicerbarh4 {
        margin-top: 1095px;
      }
    }

    .rightbottomWithoutTitle {
      top: 48px;
      height: 86.5%;
    }
    .lefttopWithTitle {
      height: 95.73%;
    }
    .lefttopWithoutTitle {
      height: 95.73%;
    }
    .content {
      .title {
        font-size: 2.143rem;
        margin: 80px 0 60px 0;
      }
      .cardsContainer {
        margin-bottom: 70px;
        .cards {
          margin-top: 60px;
          margin-left: 3.34%;
          padding-top: 45px;
          padding-bottom: 45px;
          .cardWrapper {
            margin: 68px 0 68px 0;
            width: 100%;
            height: 216px;
            border-right: 0px;
          }
        }
      }
    }
  }
  .dot {
    display: block;
    z-index: 2;
  }
}