.mymoods-attachment-image {
  margin-bottom: 80px;

  @media (max-width: 768px) {
    width: 100vw;
    padding-inline: 0;
  }
}

.mymoods-attachment-image__container {
  aspect-ratio: 1820 / 800;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;

  @media (max-width: 768px) {
    aspect-ratio: 2 / 3;
    border-radius: 0;
  }

  .mymoods-attachment-image__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    z-index: -1;

    &::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      aspect-ratio: 1820 / 760;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      z-index: -1;
      padding-inline: calc(var(--base-fs) * 50);
    }

    @media screen and (max-width: 1200px) {
      &::before {
        padding-inline: calc(var(--base-fs) * 24);
      }
    }

    @media screen and (max-width: 768px) {
      &::before {
        padding-inline: unset;
      }
    }

    .mymoods-attachment-image__text {
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-black);
      font-size: 32px;
      color: white;
      line-height: 1;

      @media (max-width: 768px) {
        font-size: 16px;
      }
    }

    .mymoods-attachment-image__text-image {
      max-width: 480px;
    }
  }
}