.media-archive {
  & .media-archive__archive {
    margin-top: 40px !important;

    @media (min-width: 1024px) {
      margin-top: 80px !important;
    }

    & .media-archive__archive-title {
      margin-bottom: 30px;

      @media (min-width: 1024px) {
        margin-bottom: 36px;
      }
    }

    & .media-archive__query-loop {
      padding: 0 var(--wp--preset--spacing--40);

      @media (min-width: 1024px) {
        padding: 0 var(--wp--preset--spacing--50);
      }
    }

    & .media-archive__query-loop ul {
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr;
      width: 100%;
      margin-bottom: 32px;

      @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(230px, auto);
      }

      @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(345px, auto);
        margin-bottom: 36px;
        gap: 20px;
      }

      & li {
        margin: 0;
      }

      & .media-archive__press-card {
        display: flex;
        flex: 1;
        height: 100%;
        flex-direction: column;
        border-radius: 12px;
        border: 2px solid var(--wp--preset--color--primary);
        padding: 16px 16px 8px 16px;
        gap: 8px;

        @media (min-width: 768px) {
          border-radius: 16px;
          padding: 24px 24px 16px 24px;
        }

        @media (min-width: 1024px) {
          gap: 16px;
        }

        & .media-archive__press-title {
          display: block;
          margin-left: 0 !important;
          margin-right: 0 !important;

          & a {
            color: var(--wp--preset--color--primary);
            font-size: 20px;
            font-weight: 700;
            line-height: 26px;
            text-align: left;
            text-decoration: none;
            text-transform: uppercase;

            @media (min-width: 1024px) {
              font-size: 24px;
              line-height: 30px;
            }
          }
        }

        &:hover a {
          text-decoration: underline;
        }
      }

      & .media-archive__press-date {
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;

        @media (min-width: 768px) {
          margin-top: auto !important;
        }

        @media (min-width: 1024px) {
          font-size: 16px;
          line-height: 24px;
        }
      }

      & .media-archive__press-excerpt {
        font-size: 14px;
        font-weight: 400;
        line-height: 17.6px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-top: 0;

        @media (min-width: 1024px) {
          font-size: 16px;
          line-height: 24px;
        }
      }

      & .media-archive__press-read-more {
        display: block;
        position: relative;
        margin-top: 0 !important;
        padding-right: 32px;
        padding-bottom: 3px;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        color: var(--wp--preset--color--primary);

        &:hover {
          text-decoration: underline;
        }

        &:after {
          content: "";
          position: absolute;
          width: 24px;
          height: 24px;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%230369B2' stroke-width='2'/%3E%3C/svg%3E");
        }
      }
    }
  }

  & .media-archive__query-loop .wp-block-buttons {
    width: 100%;
    max-width: 350px;
    margin: 0px auto 40px auto;

    @media (min-width: 1024px) {
      width: max-content;
      margin: 0px auto 80px auto;
    }

    & .wp-block-button {
      width: 100%;
      display: block;
      text-align: center;
      & a {
        width: 100%;
        display: block;
        text-align: center;
      }
    }
  }
}