* {
  font-family: 'DINPro-Medium';
  box-sizing: border-box;
}

.container {
  position: relative;
  margin: 80px auto 0 auto;
  max-width: 793px;
}

.header-container {
  text-align: center;
  margin-bottom: 60px;
  h1 {
    color: #000;
    text-align: center;
    font-family: "DINPro-Bold";
    font-size: 36px;
    font-style: normal;
    line-height: normal;
    max-width: 500px;
    margin: 0 auto;
  }
  p {
    margin: 20px auto;
    display: block;
    max-width: 650px;
    font-family: "DINPro-Light";
    font-size: 16px;
    font-style: normal;
    line-height: normal;
  }
}

.main-container {
  .top-title {
    position: relative;
    margin: 0 0 40px 0;
    color: #000;
    text-align: center;
    font-family: "DINPro-Bold";
    font-size: 36px;
    font-style: normal;
    line-height: normal;
    &:before {
      content: " ";
      position: absolute;
      display: block;
      width: 114px;
      height: 232px;
      top: 22px;
      background-image: url("../images/dotted-line-with-arrow.svg");
      pointer-events: none;
    }
    &:after {
      content: " ";
      position: absolute;
      display: block;
      width: 114px;
      height: 232px;
      top: 22px;
      right: 0;
      transform: scale(-1, 1);
      background-image: url("../images/dotted-line-with-arrow.svg");
      pointer-events: none;
    }
  }
  .bottom-title {
    position: relative;
    margin: 20px 0 0 0;
    color: #000;
    text-align: center;
    font-family: "DINPro-Bold";
    font-size: 33px;
    font-style: normal;
    line-height: normal;
    &:before {
      content: " ";
      position: absolute;
      display: block;
      width: 114px;
      height: 232px;
      bottom: 18px;
      transform: scale(1, -1);
      background-image: url("../images/dotted-line-with-arrow.svg");
      pointer-events: none;
    }
    &:after {
      content: " ";
      position: absolute;
      display: block;
      width: 114px;
      height: 232px;
      bottom: 18px;
      right: 0;
      transform: rotate(180deg);
      background-image: url("../images/dotted-line-with-arrow.svg");
      pointer-events: none;
    }
  }
  .blocks {
    display: flex;
    gap: 75px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    .block {
      width: 123px;
      cursor: pointer;
      .name {
        height: 42px;
        color: #000;
        text-align: center;
        font-family: "DINPro-Bold";
        font-size: 10px;
        font-style: normal;
        line-height: normal;
      }
      .icon {
        margin: 0 0 5px 0;
        width: 100%;
        height: 135px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .chevron {
        opacity: 0;
        position: relative;
        height: 20px;
        width: 100%;
        background: black;
        clip-path: polygon(13% 0, 87% 0, 100% 100%, 0% 100%);
      }
      &[data-block-id="1"] .icon {
        background-image: url('../images/block-1.svg');
      }
      &[data-block-id="1"] .chevron {
        background-color: #1E273B;
      }
      &[data-block-id="2"] .icon {
        background-image: url('../images/block-2.svg');
      }
      &[data-block-id="2"] .chevron {
        background-color: #075F73;
      }
      &[data-block-id="3"] .icon {
        background-image: url('../images/block-3.svg');
      }
      &[data-block-id="3"] .chevron {
        background-color: #0499BB;
      }
      &[data-block-id="4"] .icon {
        background-image: url('../images/block-4.svg');
      }
      &[data-block-id="4"] .chevron {
        background-color: #07C6E5;
      }
      &[data-block-id="5"] .icon {
        background-image: url('../images/block-5.svg');
      }
      &[data-block-id="5"] .chevron {
        background-color: #576645;
      }
      &[data-block-id="6"] .icon {
        background-image: url('../images/block-6.svg');
      }
      &[data-block-id="6"] .chevron {
        background-color: #809664;
      }
      &[data-block-id="7"] .icon {
        background-image: url('../images/block-7.svg');
      }
      &[data-block-id="7"] .chevron {
        background-color: #C2D221;
      }
      &:hover, &.active {
        &[data-block-id="1"] .icon {
          background-image: url('../images/block-1-highlight.svg');
        }
        &[data-block-id="2"] .icon {
          background-image: url('../images/block-2-highlight.svg');
        }
        &[data-block-id="3"] .icon {
          background-image: url('../images/block-3-highlight.svg');
        }
        &[data-block-id="4"] .icon {
          background-image: url('../images/block-4-highlight.svg');
        }
        &[data-block-id="5"] .icon {
          background-image: url('../images/block-5-highlight.svg');
        }
        &[data-block-id="6"] .icon {
          background-image: url('../images/block-6-highlight.svg');
        }
        &[data-block-id="7"] .icon {
          background-image: url('../images/block-7-highlight.svg');
        }
      }
      &.active {
        .chevron {
          opacity: 1;
        }
      }
    }
    &.blocks-bottom {
      .block {
        .icon {
          margin: 5px 0 0 0;
        }
        .name {
          display: flex;
          justify-content: center;
          align-items: flex-end;
        }
        .chevron {
          clip-path: polygon(0 0, 100% 0, 87% 100%, 13% 100%);
        }
      }
    }
  }

  .information-container {
    .information-block {
      display: none;
      padding: 100px 155px 80px 155px;
      text-align: center;
      .name {
        margin: 0 0 20px 0;
        font-family: "DINPro-Bold";
        font-size: 18px;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
      }
      p {
        margin: 0 0 20px 0;
        font-family: "DINPro-Light";
        font-size: 18px;
        font-style: normal;
        line-height: normal;
      }
      &[data-block-id="1"] {
        background-color: #1E273B;
        color: white;
      }
      &[data-block-id="2"] {
        background-color: #075F73;
        color: white;
      }
      &[data-block-id="3"] {
        background-color: #0499BB;
        color: white;
      }
      &[data-block-id="4"] {
        background-color: #07C6E5;
        color: white;
      }
      &[data-block-id="5"] {
        background-color: #576645;
        color: white;
      }
      &[data-block-id="6"] {
        background-color: #809664;
        color: white;
      }
      &[data-block-id="7"] {
        background-color: #C2D221;
        color: black;
      }
      &.active {
        display: block;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  .container {
    max-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 25px;
  }
  .main-container {
    .top-title {
      font-size: 30px;
      &:before {
        top: -20px;
        height: 121px;
        width: 60px;
        background-size: cover;
      }
      &:after {
        top: -20px;
        height: 121px;
        width: 60px;
        background-size: cover;
      }
    }
    .bottom-title {
      font-size: 28px;
      &:before {
        bottom: -10px;
        height: 121px;
        width: 60px;
        background-size: cover;
      }
      &:after {
        bottom: -10px;
        height: 121px;
        width: 60px;
        background-size: cover;
      }
    }
    .blocks {
      gap: 11px;
      .block {
        width: 70px;
        .name {
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          height: 50px;
          font-size: 10px;
          br {
            display: none;
          }
        }
        .icon {
          margin-top: 15px;
          width: 70px;
          height: 78px;
        }
        .chevron {
          height: 14px;
        }
      }
      &.blocks-bottom {
        justify-content: space-around;
      }
    }
    .information-container {
      .information-block {
        padding: 60px 20px;
      }
    }
  }
}