.iconAndContentCallouts {
  position: relative;
  display: flex;
  flex-direction: column;

  .innerWrapper {
    position: relative;

    .contentWrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      margin-bottom: min(5vw, 50px);

      h1, h2, h3, h4, h5, h6 {
        margin: 0;
      }

      h2 {
        color: var(--holtBlue);
      }

      h3 {
        color: var(--holtLightBlue);
        font-style: italic;
      }
    }

    .callouts {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 25px;

      @media (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 100px;
      }

      .callout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;

        .icon {
          aspect-ratio: 1 /1;
          width: 125px;
          height: 125px;
          padding: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--holtBlue);
          border-radius: 200px;
          
          @media (min-width: 768px) {
            width: 150px;
            height: 150px;
            padding: 45px;
          }

          img {
            width: 100%;
            height: auto;
          }
        }

        .content {
          width: 100%;
          max-width: 450px;
          text-align: center;

          h1, h2, h3, h4, h5, h6 {
            color: var(--holtBlue);
            margin-bottom: 0px;
          }

          p {
            margin: 15px 0;
            font-weight: 400;
          }
        }
      }
    }
  }
}