aside,
footer,
.sliderManu__1,
.sliderManu__2 {
  & section#rosita_widFive {
    width: 100% !important;

    & .rosBox {
      width: inherit !important;
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;

      & > div:nth-child(4),
      & > div:nth-child(5) {
        padding: 3rem !important;
        flex-direction: column !important;

        & p {
          font-size: 12px !important;
          margin-top: 15px !important;
          font-weight: bold !important;
          font-style: italic !important;
          letter-spacing: 1px !important;
        }
      }
    }
  }
}

section#rosita_widFive {
  max-width: var(--premary_width);

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

  & .rosBox {
    display: grid;
    height: 30rem;
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 10px;

    & .box:nth-child(1),
    & .box:nth-child(2),
    & .box:nth-child(3),
    & .box:nth-child(4),
    & .box:nth-child(5),
    & .box:nth-child(6),
    & .box:nth-child(7) {
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    & .box:nth-child(4),
    & .box:nth-child(5) {
      background-color: #000;
      padding: 18px;
      font-size: 14px;
      display: flex;
      align-items: center;
    }

    & .box:nth-child(1),
    & .box:nth-child(2),
    & .box:nth-child(3),
    & .box:nth-child(6),
    & .box:nth-child(7) {
      & .info {
        position: absolute;
        bottom: 0;
        color: #fff;
        font-size: 15px;
        background: linear-gradient(to top, black, transparent);
        align-items: flex-start;
        padding: 6rem 1rem 1rem;
        flex-direction: column;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;

        & p span {
          font-size: 13px;
        }

        & ul {
          & li {
            padding: 4px 8px 6px !important;

            & a {
              font-size: 13px;
            }
          }
        }
      }
    }

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

      & .box {
        grid-column: 1 / 1;
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        transition: 0.5s;
        padding: 0;
        position: relative;

        &.rosMode {
          opacity: 1 !important;
          visibility: visible !important;
          transition: 0.5s;
        }

        & .info {
          display: flex;
          gap: 1rem;
          background: linear-gradient(to top, #000000, #00000000);
          padding-top: 12rem;

          & p.ftf {
            font-family: "Tagesschrift" !important;
            font-size: 14px;
            border: 1px dashed #55abe2;
            width: fit-content;
            padding: 4px 8px;
            border-radius: 100px;
          }

          & h3 {
            font-size: 23px;
          }

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

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

    & .box:nth-child(3) {
      grid-area: 8 / 10 / 4 / 6;
    }

    & .box:nth-child(4) {
      grid-area: 1 / 11 / 5 / 14;
    }

    & .box:nth-child(5) {
      grid-area: 4 / 10 / 8 / 13;
    }

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

    & .box:nth-child(7) {
      grid-area: 5 / 13 / 8 / 18;
    }
  }
}

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

    & .rosBox {
      width: inherit;
      display: flex;
      flex-direction: column;
      height: auto;

      & .box:nth-child(4),
      & .box:nth-child(5) {
        padding: 3rem;
        flex-direction: column;

        & p {
          font-size: 12px;
          margin-top: 15px;
          font-weight: bold;
          font-style: italic;
          letter-spacing: 1px;
        }
      }
      
      & .box:nth-child(1),
      & .box:nth-child(2),
      & .box:nth-child(3),
      & .box:nth-child(6),
      & .box:nth-child(7) {
            height: 20rem;
        }
    }
  }
}

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

    & .rosBox {
      grid-template-rows: repeat(8, 1fr);
      height: 40rem;

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

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

      & .box:nth-child(3) {
        grid-area: 5 / 9 / 3 / 18;
      }

      & .box:nth-child(4) {
        grid-area: 7 / 9 / 5 / 18;
      }

      & .box:nth-child(5) {
        grid-area: 9 / 11 / 7 / 18;
      }

      & .box:nth-child(4),
      & .box:nth-child(5) {
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

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

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

      & .box:nth-child(6),
      & .box:nth-child(7) {
        align-content: center;

        & .info {
          display: flex;
          justify-content: center;
          padding: 0 1rem;
          height: 100%;
        }
      }
    }
  }
}

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

    & .rosBox {
      grid-template-rows: repeat(8, 1fr);
      height: 40rem;

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

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

      & .box:nth-child(3) {
        grid-area: 5 / 9 / 3 / 18;
      }

      & .box:nth-child(4) {
        grid-area: 7 / 9 / 5 / 18;
      }

      & .box:nth-child(5) {
        grid-area: 9 / 11 / 7 / 18;
      }

      & .box:nth-child(4),
      & .box:nth-child(5) {
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

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

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

      & .box:nth-child(6),
      & .box:nth-child(7) {
        align-content: center;

        & .info {
          display: flex;
          justify-content: center;
          padding: 0 1rem;
          height: 100%;
        }
      }
    }
  }
}

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