#event-page {
  margin-top: 13.6rem;

  .main {
    .event {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .event__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-lg);
        max-width: 48rem;
        width: 100%;
        padding: var(--spacing-xl);

        .event__header {
          text-align: center;
          color: var(--color-gray-400);
          font-size: var(--font-label-medium-size);
          font-weight: var(--font-label-medium-weight);
          line-height: var(--font-label-medium-line-height);
          letter-spacing: var(--font-label-medium-letter-spacing);
        }

        .event__list {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: var(--spacing-lg);

          .event__item {
            cursor: pointer;
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);

            .event__thumb {
              border-radius: 1.5rem;
              overflow: hidden;
              background-color: var(--color-gray-400);

              img {
                width: 100%;
                aspect-ratio: 2/1;
              }
            }

            .event__bottom {
              font-size: var(--font-body-large-size);
              font-weight: var(--font-body-large-m-weight);
              line-height: var(--font-body-large-line-height);
              letter-spacing: var(--font-body-large-letter-spacing);
            }

            .event__tag {
              width: 7.2rem;
              height: 3.2rem;
              position: absolute;
              top: -1rem;
              right: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 0.8rem;
              color: var(--color-white);
              background-color: var(--color-warning);
              font-size: var(--font-body-large-size);
              font-weight: var(--font-body-large-m-weight);
              line-height: var(--font-body-large-line-height);
              letter-spacing: var(--font-body-large-letter-spacing);
            }

            .event__tag--end {
              color: var(--color-font-primary);
              background-color: var(--color-gray-500);
            }
          }
        }
      }
    }
  }
}