main#details-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: calc((min(100vw, 75rem) / 4) + 4.5rem);
      z-index: 1;

      .hero-section-top-content {
        padding: 0 5rem;

        .hero-section-path {
          color: rgba(255, 255, 255, 0.48);
          filter: drop-shadow(0rem 0.75rem 0.75rem rgba(0, 0, 0, 0.24));

          a:hover {
            text-decoration: underline;
          } /* .hero-section-path a:hover */

          span {
            color: rgba(255, 255, 255, 1);
          } /* .hero-section-path span */
        } /* .hero-section-path */

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

        .hero-section-tag-share {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 2.375rem;

          .hero-section-tag-wrapper {
            display: flex;
            align-items: center;
            column-gap: 1.25rem;

            .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(255, 255, 255, 0.4);
            } /* .date */
          } /* .hero-section-tag-wrapper */

          .hero-section-share-wrapper {
            display: flex;
            align-items: center;
            column-gap: 1.25rem;

            .share {
              display: flex;

              img {
                width: 100%;
                object-fit: contain;
              } /* .share img */
            } /* .share */

            .social {
              display: flex;
              height: 2.5rem;
              width: 2.5rem;

              img {
                width: 100%;
                object-fit: contain;
                opacity: 0.12;
              } /* .social img */
            } /* .social */
          } /* .hero-section-share-wrapper */
        } /* .hero-section-tag-share */
      } /* .hero-section-top-content */
    } /* .hero-section-wrapper */
  } /* .hero-section-container */

  .blog-details-section-container {
    .blog-details-section-wrapper {
      padding-bottom: 7.5rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);

      .blog-details-section-media {
        display: flex;
        margin-top: calc((min(100vw, 75rem) / 4) * -1);

        img {
          aspect-ratio: 2;
          object-fit: cover;
          width: 100%;
          border-radius: 1.5rem;
          box-shadow: 0rem 2.5rem 7.5rem 0rem rgba(0, 0, 0, 0.16);
          z-index: 1;
        } /* .hero-section-banner-image img */
      } /* .hero-section-banner-image */

      p {
        margin-top: 7.5rem;
        padding-left: 3.75rem;
        padding-right: 3.75rem;
        line-height: 2.25rem;
        color: rgba(130, 130, 130, 1);

        span {
          line-height: 2.625rem;
          color: rgba(0, 0, 0, 1);
        } /* .blog-details-section-wrapper p span */

        a {
          display: inline-block;
          color: blue;

          &:hover {
            text-decoration: underline;
          } /* .blog-details-section-wrapper p a:hover */
        } /* .blog-details-section-wrapper p a */
      } /* .blog-details-section-wrapper p */
    } /* .blog-details-section-wrapper */
  } /* .blog-details-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: 4.375rem;

        .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-wrapper */
  } /* .blogs-grid-section-container */
} /* main#details-page */

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

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

      .hero-section-wrapper {
        .hero-section-top-content {
          padding-left: 20px;
          padding-right: 20px;

          .hero-section-path {
            a:hover {
            } /* .hero-section-path a:hover */

            span {
            } /* .hero-section-path span */
          } /* .hero-section-path */

          .hero-section-title {
          } /* .hero-section-title */

          .hero-section-tag-share {
            .hero-section-tag-wrapper {
              .tag {
              } /* .tag */

              .date {
              } /* .date */
            } /* .hero-section-tag-wrapper */

            .hero-section-share-wrapper {
              .share {
              } /* .share */

              .social {
                img {
                } /* .social img */
              } /* .social */
            } /* .hero-section-share-wrapper */
          } /* .hero-section-tag-share */
        } /* .hero-section-top-content */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .blog-details-section-container {
      .blog-details-section-wrapper {
        .blog-details-section-media {
          img {
          } /* .hero-section-banner-image img */
        } /* .hero-section-banner-image */

        p {
          span {
          } /* .blog-details-section-wrapper p span */
        } /* .blog-details-section-wrapper p */
      } /* .blog-details-section-wrapper */
    } /* .blog-details-section-container */

    .blogs-grid-section-container {
      .blogs-grid-section-wrapper {
        .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-wrapper */
    } /* .blogs-grid-section-container */
  } /* main#details-page */
}

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

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

      .hero-section-wrapper {
        .hero-section-top-content {
          .hero-section-path {
            font-size: 1.6rem;

            a:hover {
            } /* .hero-section-path a:hover */

            span {
              font-size: 1.6rem;
            } /* .hero-section-path span */
          } /* .hero-section-path */

          .hero-section-title {
            font-size: 3rem;
          } /* .hero-section-title */

          .hero-section-tag-share {
            .hero-section-tag-wrapper {
              .tag {
              } /* .tag */

              .date {
              } /* .date */
            } /* .hero-section-tag-wrapper */

            .hero-section-share-wrapper {
              .share {
                width: 2.5rem;
              } /* .share */

              .social {
                img {
                } /* .social img */
              } /* .social */
            } /* .hero-section-share-wrapper */
          } /* .hero-section-tag-share */
        } /* .hero-section-top-content */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .blog-details-section-container {
      .blog-details-section-wrapper {
        .blog-details-section-media {
          img {
          } /* .hero-section-banner-image img */
        } /* .hero-section-banner-image */

        p {
          padding: 0;

          span {
          } /* .blog-details-section-wrapper p span */
        } /* .blog-details-section-wrapper p */
      } /* .blog-details-section-wrapper */
    } /* .blog-details-section-container */

    .blogs-grid-section-container {
      .blogs-grid-section-wrapper {
        .blogs-grid-section-insights-container {
          .blogs-grid-section-insights-wrapper {
            grid-template-columns: repeat(auto-fit, minmax(280px, 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-wrapper */
    } /* .blogs-grid-section-container */
  } /* main#details-page */
}

.blog-details-section-container .p-16-500 {
  text-align: justify;
}