.wp__mobile {
  & h3 {
    opacity: 1 !important;
    transform: translateY(0rem) !important;
  }

  & p:nth-child(1) {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }
}

main#Roseta__lastContet_3 {
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin: 0;

  & hr {
    background: black;
    width: var(--premary_width);
  }

  /*  */
  & * {
    color: #fff;
    font-family: "Tagesschrift";
  }

  & .labelName {
    & p {
      font-size: 25px;
      color: #000000c1 !important;
    }
  }

  /*  */
  & .rosBox {
    max-width: var(--premary_width);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
    padding: 0 7px;
    gap: 2px;

    & .box {
      height: 30rem;
      border-radius: 3px;
      overflow: hidden;
      position: relative;

      & .info {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        text-align: center;
        transition: 0.5s;
        flex-direction: column;
        gap: 20px;

        & p {
          opacity: 0;
          color: #fff;
          transition: 0.5s;
        }

        & p:nth-child(1) {
          transform: translateY(2rem);
          font-size: 14px;
          background: #fffdfe2b;
          padding: 8px 13px;
          color: #ffffff;
          border-radius: 50px;
          backdrop-filter: blur(10px);
        }

        & h3 {
          opacity: 0;
          font-size: 17px;
          transform: translateY(2rem);
        }
      }

      &:hover,
      &:nth-child(1) {
        & .info {
          transition: 0.5s;
          backdrop-filter: brightness(0.3);

          & h3 {
            opacity: 1 !important;
            transform: translateY(0rem);
            transition: 0.5s;
          }

          & p:nth-child(1) {
            transition: 0.5s;
            transform: translateY(0px);
            opacity: 1;
            transition-delay: 0.5s;
          }

          & .more {
            & p {
              font-size: 12px !important;
              background: transparent !important;
              padding: 0 !important;
            }
          }
        }
      }
    }
  }

  & .moreLoad {
    color: #000 !important;
    background: #e2e1e1;
    text-align: center;
    width: fit-content;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    cursor: pointer;
    stroke: #000 !important;
    font-weight: bold;

    &:hover svg {
      transform: rotate(360deg);
      transition: 0.5s;
    }
  }
}