.newsletters-content {
  display: block;

  .newsletters-content__wrapper {
    --grid-gap: 7.5rem;
    --grid-items: repeat(3, 1fr);
    display: flex;
    flex-direction: column;
    gap: 6rem;
    text-align: center;

    .newsletters-content__heading {
      font-size: var(--title-size);
      font-weight: var(--title-weight);
    }

    .newsletters-content__grid {
      display: grid;
      gap: var(--grid-gap);
      grid-template-columns: var(--grid-items);

      .newsletters-content__card {
        background: #141B4D;
        border: none;
        border-radius: 1rem;
        color: #fff;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        overflow: hidden;
        padding: 2.4rem 1rem;

        * {
          pointer-events: none;
        }

        .newsletters-content__card-cover {
          margin: 0 auto;
          max-width: 16.5rem;
          width: 100%;
        }

        .newsletters-content__card-title {
          font-size: var(--card-title-size);
          font-weight: var(--card-title-weight);
        }

        .newsletters-content__card-subtitle {
          font-size: var(--card-subtitle-size);
          font-weight: var(--card-subtitle-weight);
        }

        .newsletters-content__card-media {
          padding-bottom: 147.5%;
          position: relative;

          .newsletters-content__card-cover__image {
            height: 100%;
            left: 50%;
            object-fit: cover;
            position: absolute;
            top: 50%;
            translate: -50% -50%;
            width: 100%;
          }
        }
      }
    }
  }

  .newsletters-content__dialog {
    background: #f9f9f9;
    border: none;
    border-radius: 1rem;
    height: 100%;
    margin: auto;
    max-height: min(calc(100vh - 4rem), 75rem);
    max-width: min(calc(100vw - 4rem), 100rem);
    padding: 4.5rem;
    text-align: center;
    width: 100%;

    &[open] {
      display: flex;
      flex-direction: column;
    }

    .newsletters-content__dialog-header {
      display: flex;
      justify-content: end;

      .newsletters-content__dialog-close {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 3rem;
        font-weight: 300;
        padding: 1rem;
        position: absolute;
        right: 1rem;
        text-transform: lowercase;
        top: 1rem;
      }
    }

    .newsletters-content__dialog-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 2.4rem;

      .newsletters-content__dialog-title {
        font-size: var(--dialog-title-size);
        font-weight: var(--dialog-title-weight);
      }

      .newsletters-content__dialog-iframe {
        flex: 1;

        iframe {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  @media (width < 1024px) {
    .newsletters-content__wrapper {
      --grid-gap: 3rem;
      --grid-items: repeat(2, 1fr);
    }
  }

  @media (width < 768px) {
    .newsletters-content__wrapper {
      --grid-gap: 1.5rem;
      --grid-items: 100%;
    }
  }
}