main#research-page {
  .hero-section-container {
    position: relative;
    background-image: url("../assets/images/gradient-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: -3.75rem;
      top: 0;
      height: 100%;
      width: 31.25rem;
      background-image: url("../assets/images/logo-arc.svg");
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
    } /* .hero-section-container::after */

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: -22.5rem;
      top: 0;
      height: 100%;
      width: 31.25rem;
      background-image: url("../assets/images/logo-arc.svg");
      background-position: right;
      background-repeat: no-repeat;
      background-size: cover;
    } /* .hero-section-container::before */

    .hero-section-wrapper {
      --header-height: 7.875rem;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: calc(var(--header-height) + 5.625rem);
      padding-bottom: 7.5rem;
      z-index: 1;

      .hero-section-top-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .hero-section-title {
          filter: drop-shadow(0rem 1.25rem 2.5rem rgba(0, 0, 0, 0.48));
        } /* .hero-section-title */

        .hero-section-description {
          margin-top: 2rem;
          color: rgba(255, 255, 255, 0.48);
          filter: drop-shadow(0rem 0.75rem 0.75rem rgba(0, 0, 0, 0.24));
        } /* .hero-section-description */
      } /* .hero-section-top-content */
    } /* .hero-section-wrapper */
  } /* .hero-section-container */

  .blogs-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .blogs-section-wrapper {
      .blogs-section-insights-container {
        margin-top: 3.75rem;

        .blogs-section-insights-wrapper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(1, 1fr);
          column-gap: 2.5rem;
          row-gap: 2.5rem;

          .blog-card-container {
            padding: 1.875rem;
            border-radius: 1.5rem;

            /* &:first-child {
              grid-row: 1 / 3;
            }  */

            &.horizontal {
              .blog-card-wrapper {
                flex-direction: row;
                height: 100%;

                .blog-card-thumbnail {
                  width: 53%;
                  margin-bottom: 0;
                  margin-right: 1.5rem;

                  img {
                    aspect-ratio: auto;
                  } /* .horizontal .blog-card-thumbnail img */
                } /* .horizontal .blog-card-thumbnail */

                .blog-card-description {
                  width: 47%;

                  .blog-card-tag-date {
                    margin-top: 0;
                  } /* .horizontal .blog-card-tag-date */

                  .blog-card-tag-title {
                    margin-top: 0.75rem;
                  } /* .horizontal .blog-card-tag-title */

                  .blog-card-tag-cta {
                    margin-top: 1rem;
                  } /* .horizontal .blog-card-tag-cta */
                } /* .horizontal .blog-card-description */
              } /* .horizontal.blog-card-wrapper */
            } /* .blog-card-container.horizontal */

            .blog-card-wrapper {
              display: flex;
              flex-direction: column;
              height: 100%;

              .blog-card-thumbnail {
                display: flex;
                margin-bottom: 1.5rem;
                border-radius: 1rem;
                overflow: hidden;

                img {
                  object-fit: cover;
                  aspect-ratio: 1.66;
                  width: 100%;
                } /* .blog-card-thumbnail img  */
              } /* .blog-card-thumbnail */

              .blog-card-description {
                .blog-card-tag-date {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .tag {
                    padding: 0.5rem 1rem;
                    text-transform: uppercase;
                    border-radius: 6.1875rem;
                    background-color: rgba(209, 166, 23, 0.12);
                    color: rgba(209, 166, 23, 1);
                  } /* .tag */

                  .date {
                    color: rgba(130, 130, 130, 1);
                  } /* .date */
                } /* .blog-card-tag-date */

                .blog-card-tag-title {
                  margin-top: 1.25rem;

                  h5 {
                    display: -webkit-box;
                    line-height: 1.875rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                  } /* .blog-card-tag-title h5 */
                } /* .blog-card-tag-title */

                .blog-card-tag-cta {
                  display: flex;
                  margin-top: 1.875rem;

                  .tertiary-button {
                    p {
                      color: rgba(31, 72, 152, 1);
                    } /* .tertiary-button p */
                  } /* .tertiary-button */
                } /* .blog-card-tag-cta */
              } /* .blog-card-description */
            } /* .blog-card-wrapper */
          } /* .blog-card-container */
        } /* .blogs-section-insights-wrapper */
      } /* .blogs-section-insights-container */
    } /* .blogs-section-wrapper */
  } /* .blogs-section-container */

  .blogs-grid-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .blogs-grid-section-wrapper {
      .blogs-grid-section-insights-container {
        margin-top: 3rem;

        .blogs-grid-section-insights-wrapper {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 1.875rem;
          row-gap: 1.875rem;

          .blog-card-container {
            padding: 1.5rem;
            border-radius: 1.5rem;

            .blog-card-wrapper {
              height: 100%;

              .blog-card-thumbnail {
                display: flex;
                margin-bottom: 1.5rem;
                border-radius: 1rem;
                overflow: hidden;

                img {
                  object-fit: cover;
                  aspect-ratio: 1.66;
                  width: 100%;
                } /* .blog-card-thumbnail img  */
              } /* .blog-card-thumbnail */

              .blog-card-description {
                display: flex;
                flex-direction: column;

                .blog-card-tag-date {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .tag {
                    padding: 0.5rem 1rem;
                    text-transform: uppercase;
                    border-radius: 6.1875rem;
                    background-color: rgba(209, 166, 23, 0.12);
                    color: rgba(209, 166, 23, 1);
                  } /* .tag */

                  .date {
                    color: rgba(130, 130, 130, 1);
                  } /* .date */
                } /* .blog-card-tag-date */

                .blog-card-tag-title {
                  flex: 1;
                  margin-top: 1.25rem;

                  h5 {
                    display: -webkit-box;
                    line-height: 1.875rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                  } /* .blog-card-tag-title h5 */
                } /* .blog-card-tag-title */

                .blog-card-tag-cta {
                  display: flex;
                  margin-top: 1.875rem;

                  .tertiary-button {
                    p {
                      color: rgba(31, 72, 152, 1);
                    } /* .tertiary-button p */
                  } /* .tertiary-button */
                } /* .blog-card-tag-cta */
              } /* .blog-card-description */
            } /* .blog-card-wrapper */
          } /* .blog-card-container */
        } /* .blogs-grid-section-insights-wrapper */
      } /* .blogs-grid-section-insights-container */

      .blogs-grid-section-pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 4.375rem;

        .blogs-grid-section-pagination-wrapper {
          display: flex;
          align-items: center;
          column-gap: 1.125rem;

          .previous-button {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;
          } /* .previous-button */

          .pages {
            display: flex;
            align-items: center;
            column-gap: 0.75rem;

            .page {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 3rem;
              width: 3rem;
              border-radius: 6.1875rem;
              border: 2px solid rgba(242, 242, 242, 1);

              &.current {
                background-color: rgba(31, 72, 152, 1);

                p {
                  color: rgba(255, 255, 255, 1);
                } /* .page.current p */
              } /* .page.current */

              p {
                color: rgba(0, 0, 0, 1);
              } /* .page p */
            } /* .page */

            .extras {
              display: flex;
              height: 3rem;
              width: 3rem;

              svg {
                width: 100%;
                height: 100%;
              } /* .extras svg */
            } /* .extras */
          } /* .pages */

          .next-button {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;
          } /* .next-button */
        } /* .blogs-grid-section-pagination-wrapper */
      } /* .blogs-grid-section-pagination-container */
    } /* .blogs-grid-section-wrapper */
  } /* .blogs-grid-section-container */
} /* main#research-page */

/* tablet breakpoint */
@media (max-width: 1024px) {
  main#research-page {
    .hero-section-container {
      &::after {
      } /* .hero-section-container::after */

      &::before {
      } /* .hero-section-container::before */

      .hero-section-wrapper {
        .hero-section-top-content {
          .hero-section-title {
          } /* .hero-section-title */

          .hero-section-description {
          } /* .hero-section-description */
        } /* .hero-section-top-content */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .blogs-section-container {
      .blogs-section-wrapper {
        .blogs-section-insights-container {
          .blogs-section-insights-wrapper {
            .blog-card-container {
              &:first-child {
              } /* .blog-card-container:first-child */

              &.horizontal {
                .blog-card-wrapper {
                  .blog-card-thumbnail {
                    img {
                    } /* .horizontal .blog-card-thumbnail img */
                  } /* .horizontal .blog-card-thumbnail */

                  .blog-card-description {
                    .blog-card-tag-date {
                    } /* .horizontal .blog-card-tag-date */

                    .blog-card-tag-title {
                    } /* .horizontal .blog-card-tag-title */

                    .blog-card-tag-cta {
                    } /* .horizontal .blog-card-tag-cta */
                  } /* .horizontal .blog-card-description */
                } /* .horizontal.blog-card-wrapper */
              } /* .blog-card-container.horizontal */

              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-section-insights-wrapper */
        } /* .blogs-section-insights-container */
      } /* .blogs-section-wrapper */
    } /* .blogs-section-container */

    .blogs-grid-section-container {
      .blogs-grid-section-wrapper {
        .blogs-grid-section-filter-search-container {
          .blogs-grid-section-filter-search-wrapper {
            .filter {
              &:hover {
              } /* .filter:hover */

              &.selected {
                p {
                } /* .filter.selected p */
              } /* .filter.selected */

              p {
              } /* .filter p */
            } /* .filter */

            .search-wrapper {
              input {
              } /* .search-wrapper input */
            } /* .search-wrapper */
          } /* .blogs-grid-section-filter-search-wrapper */
        } /* .blogs-grid-section-filter-search-container */

        .blogs-grid-section-insights-container {
          .blogs-grid-section-insights-wrapper {
            .blog-card-container {
              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-grid-section-insights-wrapper */
        } /* .blogs-grid-section-insights-container */

        .blogs-grid-section-pagination-container {
          .blogs-grid-section-pagination-wrapper {
            .previous-button {
            } /* .previous-button */

            .pages {
              .page {
                &.current {
                  p {
                  } /* .page.current p */
                } /* .page.current */

                p {
                } /* .page p */
              } /* .page */

              .extras {
              } /* .extras */
            } /* .pages */

            .next-button {
            } /* .next-button */
          } /* .blogs-grid-section-pagination-wrapper */
        } /* .blogs-grid-section-pagination-container */
      } /* .blogs-grid-section-wrapper */
    } /* .blogs-grid-section-container */
  } /* main#research-page */
}

/* mobile breakpoint */
@media (max-width: 640px) {
  main#research-page {
    .hero-section-container {
      &::after {
      } /* .hero-section-container::after */

      &::before {
      } /* .hero-section-container::before */

      .hero-section-wrapper {
        .hero-section-top-content {
          .hero-section-title {
          } /* .hero-section-title */

          .hero-section-description {
          } /* .hero-section-description */
        } /* .hero-section-top-content */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .blogs-section-container {
      .blogs-section-wrapper {
        .blogs-section-insights-container {
          .blogs-section-insights-wrapper {
            grid-template-columns: repeat(1, 1fr);

            .blog-card-container {
              &:first-child {
              } /* .blog-card-container:first-child */

              &.horizontal {
                .blog-card-wrapper {
                  flex-direction: column;

                  .blog-card-thumbnail {
                    width: 100%;
                    margin-bottom: 1.5rem;
                    margin-right: 0;

                    img {
                    } /* .horizontal .blog-card-thumbnail img */
                  } /* .horizontal .blog-card-thumbnail */

                  .blog-card-description {
                    width: 100%;

                    .blog-card-tag-date {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    } /* .horizontal .blog-card-tag-date */

                    .blog-card-tag-title {
                      margin-top: 1.25rem;
                    } /* .horizontal .blog-card-tag-title */

                    .blog-card-tag-cta {
                      display: flex;
                      margin-top: 1.875rem;
                    } /* .horizontal .blog-card-tag-cta */
                  } /* .horizontal .blog-card-description */
                } /* .horizontal.blog-card-wrapper */
              } /* .blog-card-container.horizontal */

              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                      font-size: 1.8rem;
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-section-insights-wrapper */
        } /* .blogs-section-insights-container */
      } /* .blogs-section-wrapper */
    } /* .blogs-section-container */

    .blogs-grid-section-container {
      .blogs-grid-section-wrapper {
        .blogs-grid-section-filter-search-container {
          .blogs-grid-section-filter-search-wrapper {
            .filter {
              &:hover {
              } /* .filter:hover */

              &.selected {
                p {
                } /* .filter.selected p */
              } /* .filter.selected */

              p {
              } /* .filter p */
            } /* .filter */

            .search-wrapper {
              input {
              } /* .search-wrapper input */
            } /* .search-wrapper */
          } /* .blogs-grid-section-filter-search-wrapper */
        } /* .blogs-grid-section-filter-search-container */

        .blogs-grid-section-insights-container {
          .blogs-grid-section-insights-wrapper {
            grid-template-columns: repeat(1, 1fr);

            .blog-card-container {
              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                      font-size: 1.8rem;
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-grid-section-insights-wrapper */
        } /* .blogs-grid-section-insights-container */

        .blogs-grid-section-pagination-container {
          .blogs-grid-section-pagination-wrapper {
            .previous-button {
            } /* .previous-button */

            .pages {
              .page {
                &.current {
                  p {
                  } /* .page.current p */
                } /* .page.current */

                p {
                } /* .page p */
              } /* .page */

              .extras {
              } /* .extras */
            } /* .pages */

            .next-button {
            } /* .next-button */
          } /* .blogs-grid-section-pagination-wrapper */
        } /* .blogs-grid-section-pagination-container */
      } /* .blogs-grid-section-wrapper */
    } /* .blogs-grid-section-container */
  } /* main#research-page */
}