.always-on-slider {
  .buyers-guide {
    padding: 150px 0 240px 0;

    @media (max-width: 1024px) {
      padding: 100px 0 100px 0;
      overflow: hidden;
    }
    .container {
      h2 {
        max-width: 910px;
        margin: 0 auto;
        margin-bottom: 70px;
        font-size: var(--fs-5xl);
        line-height: 80%;
        letter-spacing: -6px;
        @media (max-width: 1375px) {
          max-width: 760px;
          letter-spacing: -3px;
          margin-bottom: 50px;
        }
      }
      .guide-inner {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        height: 314px;
        @media (max-width: 1024px) {
          flex-direction: column;
          height: auto;
          align-items: center;
          justify-content: center;
          text-align: center;
        }

        .acordeon {
          position: relative;
          width: 264px;
          height: 374px;
          @media (max-width: 1024px) {
            width: 222px;
            height: 314px;
            transition: all 0.8s ease;
            transform: translateX(70px);
          }
          figure {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 40px;
            border-radius: 9px;
            overflow: hidden;
            transform: translate(0px, 0px) rotate(0deg);
            box-shadow: 1.63px 1.86px 5.58px 0px #0000000d, 6.28px 7.68px 10px 0px #0000000a, 14.19px 17.44px 13.49px 0px #00000008, 25.12px 30.93px 15.82px 0px #00000003, 39.08px 48.38px 17.44px 0px #00000000;

            transition: all 0.8s ease;

            &:nth-child(2) {
              transform: translate(-30px, 0px) rotate(0deg);
            }
            &:nth-child(3) {
              transform: translate(-60px, 0px) rotate(0deg);
            }
            &:nth-child(4) {
              transform: translate(-90px, 0px) rotate(-0deg);
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            @media (max-width: 1180px) {
              &:nth-child(2) {
                transform: translate(-20px, 0px) rotate(0deg);
              }
              &:nth-child(3) {
                transform: translate(-40px, 0px) rotate(0deg);
              }
              &:nth-child(4) {
                transform: translate(-60px, 0px) rotate(-0deg);
              }
            }
          }
        }
        .guide-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          .guide-texts {
            margin: 0;
            margin-block: 50px 30px;
            @media (max-width: 1024px) {
              margin-block: 30px;
              order: 2;
            }
            li {
              display: flex;
              gap: 16px;
              align-items: flex-start;
              margin-bottom: 30px;
              font-family: var(--ff-fibbl);
              text-transform: uppercase;
              font-size: 24px;
              @media (max-width: 1024px) {
                text-align: left;
              }
              svg {
                margin-top: 12px;
              }
            }
          }
          figure {
            margin-block: 50px 30px;
            @media (max-width: 1024px) {
              margin-block: 30px;
              order: 2;
            }
            .desktop {
              display: block;
              @media (max-width: 768px) {
                display: none;
              }
            }
            .mobile {
              display: none;
              @media (max-width: 768px) {
                display: block;
              }
            }
          }
          .cta {
            @media (max-width: 1024px) {
              margin-top: 30px;
            }
            .btn {
              color: #fffaee;
              background: #ff6464;
              border-color: #ff6464;
              height: 80px !important;
              font-weight: 700;
              padding: 24px 28px !important;
              border-radius: 30px !important;
              font-size: 32px !important;
              &:hover {
                color: #ff6464;
                background-color: #fffaee;
                border-color: #ff6464;
              }
            }
          }
        }
        &:hover {
          .acordeon {
            @media (max-width: 1024px) {
              transform: translateX(120px);
            }
            figure {
              transform: translate(0px, 0px) rotate(10deg);
              &:nth-child(2) {
                transform: translate(-30px, -30px) rotate(-10deg);
              }
              &:nth-child(3) {
                transform: translate(-120px, -30px) rotate(-30deg);
              }
              &:nth-child(4) {
                transform: translate(-200px, 0px) rotate(-45deg);
              }
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
}