aside,
footer,
.sliderManu__1,
.sliderManu__2 {
  section#rosita_widOne {
    & .ros__continer {
      display: flex;
      flex-direction: column;
      height: auto;
      width: 100%;
      overflow: hidden;
      padding: 0 !important;

      & .rosBox:nth-child(2) {
        height: 35rem;
        order: -1;
      }

      & .rosBox:nth-child(3) {
        display: flex;
        flex-direction: column;

        & .info {
          gap: 1rem;
        }
      }

      & .rosBox:nth-child(4) {
        display: flex;
        flex-direction: column;

        & .box:not(:nth-child(2)) {
          height: 15rem;
        }
      }
    }
  }
}

/*  */
.sliderManu__1,
.sliderManu__2 {
  section#rosita_widOne {
    & * {
      color: #fff !important;
    }
  }
}

/*  */
section#rosita_widOne {
  max-width: var(--premary_width);

  & * {
    font-family: "Inria Sans", sans-serif;
    color: #fff;
  }

  & .ros__continer {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: repeat(7, 1fr);
    height: 47rem;

    & .rosBox:nth-child(1) {
      grid-area: 1 / 1 / 6 / 6;
      display: flex;
      flex-direction: column;
      gap: 5px;

      & * {
        color: #000;
        font-weight: bold;
      }

      & .box {
        border-bottom: 1px solid #87848459;
        padding-bottom: 6px;
        gap: 10px;

        & .img {
          height: 95px;
          width: 95px;
          min-width: 95px;
          border-radius: 100%;
          overflow: hidden;
          border: 3px solid #00000080;
        }

        & .info {
          width: -webkit-fill-available;
          justify-content: center;
          gap: 1.3rem;
          flex-direction: column;

          & p:first-child {
            font-size: 14px;
          }

          h3:nth-child(1) {
            font-size: 14px;
            font-weight: bold;
            display: inline;
            -webkit-box-decoration-break: clone;
          }

          p:nth-child(2) {
            font-size: 12px;
          }
        }
      }
    }

    /*  */
    & .rosBox:nth-child(2) {
      grid-area: 1 / 13 / 6 / 6;
      border-radius: 10px;
      position: relative;

      & .box {
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        border-radius: 10px;
        transition: 0.5s;

        & img {
          border-radius: 10px;
        }

        & .info {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 1rem;
          background: linear-gradient(to top, black, transparent);
          color: #fff;

          & p:nth-child(1) {
            width: fit-content;
            background: #0061ff;
            font-size: 13px;
            padding: 5px 11px 8px;
            border-radius: 50px;
            margin-bottom: 8px;
            gap: 5px;

            & a {
              color: #fff;
            }
          }

          & h3:nth-child(2) {
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: bold;
            font-style: italic;
          }

          & p:nth-child(3) {
            font-size: 12px;
          }
        }
      }

      /* Animation */
      &.Motion_1 {
        & .box {
          transform: translate(15px, 15px);
        }

        & .rosMode {
          opacity: 1;
          visibility: visible;
          transition: 0.9s;
          transform: translate(0, 0);
        }
      }

      &.Motion_2 {
        overflow: hidden;

        & .box {
          transform: scale(1.2);
        }

        & .rosMode {
          opacity: 1;
          visibility: visible;
          transition: 0.9s;
          transform: scale(1);
        }
      }

      &:not(.Motion_1):not(.Motion_2) {
        & .box {
          transform: translate(-15px, -15px);
        }

        & .rosMode {
          opacity: 1;
          visibility: visible;
          transition: 0.9s;
          transform: translate(0, 0);
        }
      }
    }

    /*  */
    & .traking {
      width: fit-content;
      position: absolute;
      right: 1rem;
      top: 1rem;
      gap: 5px;
      z-index: 2;

      & .trak {
        border-radius: 100%;
        padding: 6px 7px 3px;
        cursor: pointer;
        backdrop-filter: blur(15px);

        & svg {
          fill: #fff;
        }
      }
    }

    & .rosBox:nth-child(3) {
      grid-area: 1 / 13 / 6 / 18;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 30px;

      & .box:nth-child(1) {
        overflow: hidden;
        height: 11rem;
        border-radius: 10px;
        position: relative;
        align-items: center;
        grid-area: 1 / 1 / 1 / 2;

        & .info {
          position: absolute;
          text-align: center;
          height: inherit;
          color: #fff;
          background: linear-gradient(45deg, #000000a6, transparent);
          align-items: center;
          width: 100%;

          & h3 {
            font-size: 17px;
            padding: 0 35px;
            text-align: left;
            line-height: 22px;
            letter-spacing: 1px;
            font-weight: normal;
          }
        }
      }

      & .box:nth-child(2),
      & .box:nth-child(3),
      & .box:nth-child(4) {
        gap: 1rem;
        border-bottom: 1px solid #87848459;
        padding-bottom: 10px;
        justify-content: flex-start;

        & * {
          color: #000;
        }

        & .numb {
          font-size: 40px;
          width: 7rem;
          min-width: 7rem;
          display: flex;
          align-items: center;
          width: 7rem;
          justify-content: center;
          border-right: 1px solid #0000003b;
          font-family: "Inspiration", cursive;
          font-weight: bold;
        }

        & .info {
          flex-direction: column;
          justify-content: space-evenly;

          & h3:first-child {
            font-size: 14px;
            font-weight: bold;
          }

          & p:last-child {
            font-size: 12px;
          }
        }
      }
    }

    & .rosBox:nth-child(4) {
      grid-area: 8 / 18 / 6 / 1;
      grid-template-columns: repeat(17, 1fr);
      grid-template-rows: repeat(1, 1fr);
      display: grid;
      gap: 20px;

      & .box:nth-child(1),
      & .box:nth-child(2),
      & .box:nth-child(3) {
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        max-height: 15rem;

        & .info {
          position: absolute;
          bottom: 0;
          padding: 3rem 1rem 1rem;
          width: 100%;
          background: linear-gradient(to top, black, transparent);

          & p {
            color: #fff;
            font-size: 12px;

            & * {
              color: #fff;
            }
          }

          & h3:first-child {
            margin-bottom: 10px;
            padding: 0 20px 0 0;
            line-height: 22px;
            letter-spacing: 1px;
            color: #fff;
            font-weight: normal;
            font-size: 15px;
          }

          & h3:last-child {
            margin-bottom: 10px;
            padding: 0 20px 0 0;
            line-height: 22px;
            letter-spacing: 1px;
            color: #fff;
            font-weight: normal;
            font-size: 15px;
          }
        }
      }

      & .box:nth-child(1) {
        grid-area: 1 / 1 / 1 / 6;
      }

      & .box:nth-child(2) {
        grid-area: 1 / 13 / 1 / 6;

        & .info {
          & p:first-child {
            margin-bottom: 10px;
            font-size: 12px;
            border: 1px dashed;
            padding: 4px 6px;
            width: fit-content;
            border-radius: 100px;

            & span:before {
              content: "";
              width: 5px;
              height: 5px;
              border: 2px solid #3bc1f2;
              display: inline-block;
              border-radius: 100%;
              margin-right: 3px;
            }
          }

          & p:last-child {
            font-size: 18px;
          }
        }
      }

      & .box:nth-child(3) {
        grid-area: 2 / 18 / 1 / 13;
      }
    }
  }
}

/*  */
@media (max-width: 576px) {
  section#rosita_widOne {
    padding: 0 7px;

    & .ros__continer {
      display: flex;
      flex-direction: column;
      height: auto;
      width: 100%;
      overflow: hidden;
      padding: 0 !important;

      & .rosBox:nth-child(2) {
        height: 35rem;
        order: -1;
      }

      & .rosBox:nth-child(3) {
        display: flex;
        flex-direction: column;

        & .info {
          gap: 1rem;
        }
      }

      & .rosBox:nth-child(4) {
        display: flex;
        flex-direction: column;

        & .box:not(:nth-child(2)) {
          height: 15rem;
        }
      }
    }
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  & section#rosita_widOne {
    padding: 0 7px;

    & .ros__continer {
      display: flex;
      flex-direction: column;
      height: auto;
      width: 100%;
      overflow: hidden;
      padding: 0 !important;

      & .rosBox:nth-child(1) {
        flex-direction: row;
                flex-wrap: wrap;
                gap: 1rem;
                justify-content: space-between;

        & .box {
          width: calc(100% / 2 - 20px);
        }
      }

      & .rosBox:nth-child(2) {
        height: 35rem;
        order: -1;
      }

      & .rosBox:nth-child(3) {
        display: flex;
        flex-direction: column;

        & .info {
          gap: 1rem;
        }
      }

      & .rosBox:nth-child(4) {
        display: flex;
        flex-direction: column;

        & .box:not(:nth-child(2)) {
          height: 15rem;
        }
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  section#rosita_widOne {
    padding: 0 7px;

    & .ros__continer {
      height: unset !important;

      & .rosBox:nth-child(1) {
        flex-direction: row;
        gap: 2rem;
        display: flex;
        justify-content: flex-start;
        grid-area: 1 / 1 / 6 / 18;
        flex-wrap: wrap;

        & .box {
          width: calc(100% / 3);
          flex: 1 1 0;
          display: flex;
          flex-direction: column-reverse;
          align-items: center;

          & h3,
          & p {
            text-align: center;
          }
        }
      }

      & .rosBox:nth-child(2) {
        grid-area: 6 / 10 / 30 / 1 !important;
      }

      & .rosBox:nth-child(3) {
        grid-area: 6 / 18 / 35 / 10 !important;
        display: flex !important;
        height: fit-content;
        flex-direction: column;

        & .box:nth-child(2),
        & .box:nth-child(3),
        & .box:nth-child(4) {
          min-height: 5rem;
        }
      }

      & .rosBox:nth-child(4) {
        grid-area: 35 / 18 / 30 / 1 !important;
      }
    }
  }

  /*  */
  aside:has(> section:nth-of-type(2)) {
    section#rosita_widOne {
      & .ros__continer {
        & .rosBox:nth-child(1) {
          & .box {
            width: calc(100% / 2 - 1.5rem) !important;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  section#rosita_widOne {
    padding: 0 7px;
  }
}