.t-o-use--title {
  background-color: var(--slb-blue);
  padding: 8.6rem;
  border-top: 1px solid var(--slb-grey-5);
  color: var(--slb-white);
}

.t-o-use--title h1 {
  font-size: 3rem;
  font-weight: 400;
  padding-top: 3rem;
  padding-bottom: 8rem;
  letter-spacing: 0.2em;
}

.t-o-use--overview {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 6.1rem 9.9rem;
}

.logo--container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo--container span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--slb-blue);
  height: 100px;
  width: 100px;
  border-radius: 100px;
  font-size: 5rem;
  color: var(--slb-white);
}

.terms {
  font-size: 1.8rem;
  line-height: 1.5;
}

.terms span {
  font-size: 2rem;
  color: var(--slb-blue);
}

/* --- RESPONSIVE STYLES --- */
/* Following patterns from casedhole.css, responsive.css etc. */

/* Target: Smaller Desktops / Large Tablets (Below 1200px) */
@media (max-width: 75em) {
  /* --- terms.html Specific Adjustments (75em) --- */

  /* Current Page Nav */
  .current-page-links {
    padding: 1rem 2.4rem;
    font-size: 1.1rem;
  }

  .t-o-use--title {
    padding: 6.4rem 6.4rem; /* Reduced padding */
  }
  .t-o-use--title h1 {
    font-size: 2.8rem; /* Slightly smaller */
  }
  .t-o-use--overview {
    padding: 4.8rem 6.4rem; /* Reduced padding */
    gap: 4rem; /* Reduced gap */
  }
  .logo--container span {
    height: 90px; /* Slightly smaller */
    width: 90px; /* Slightly smaller */
    font-size: 4.5rem; /* Slightly smaller icon */
  }
  .terms {
    font-size: 1.7rem; /* Slightly smaller */
  }
  .terms span {
    font-size: 1.9rem; /* Slightly smaller */
  }
}

/* Target: Tablets (Below 944px) */
@media (max-width: 59em) {
  /* --- terms.html Specific Adjustments (59em) --- */

  .t-o-use--title {
    padding: 4.8rem 3.2rem; /* Reduced padding */
  }
  .t-o-use--title h1 {
    font-size: 2.6rem; /* Reduced */
  }
  .t-o-use--overview {
    padding: 3.2rem 3.2rem; /* Reduced padding */
    gap: 3.2rem; /* Reduced gap */
  }
  .logo--container span {
    height: 80px; /* Reduced */
    width: 80px; /* Reduced */
    font-size: 4rem; /* Reduced icon */
  }
  .terms {
    font-size: 1.6rem; /* Reduced */
  }
  .terms span {
    font-size: 1.8rem; /* Reduced */
  }
}

/* Target: Small Tablets (~768px) */
@media (max-width: 48em) {
  /* --- terms.html Specific Adjustments (48em) --- */
  .t-o-use--title {
    padding: 4rem 2.4rem;
  }
  .t-o-use--title h1 {
    font-size: 2.4rem;
  }
  .t-o-use--overview {
    padding: 2.8rem 2.4rem;
    gap: 2.8rem;
  }
  .logo--container span {
    height: 70px;
    width: 70px;
    font-size: 3.5rem;
  }
  .terms {
    font-size: 1.5rem;
  }
  .terms span {
    font-size: 1.7rem;
  }
}

/* Target: Mobile (~550px) */
@media (max-width: 34.375em) {
  /* --- terms.html Specific Adjustments (34.375em) --- */

  .t-o-use--title {
    padding: 3.2rem 1.6rem; /* Reduced padding */
  }
  .t-o-use--title h1 {
    font-size: 2.2rem; /* Reduced */
    text-align: center; /* Center title */
  }
  .t-o-use--overview {
    padding: 2.4rem 2.4rem; /* Reduced padding */
    gap: 2.4rem; /* Reduced gap */
  }
  .logo--container span {
    height: 60px; /* Reduced */
    width: 60px; /* Reduced */
    font-size: 3rem; /* Reduced icon */
  }
  .terms {
    font-size: 1.4rem; /* Reduced */
    line-height: 1.7; /* Increase line height slightly for readability */
  }
  .terms span {
    font-size: 1.6rem; /* Reduced */
  }
}

/* Target: Small Mobile (Below 480px) */
@media (max-width: 30em) {
  /* --- terms.html Specific Adjustments (30em) --- */

  .t-o-use--title {
    padding: 2.8rem 1.2rem;
  }
  .t-o-use--title h1 {
    font-size: 2rem;
  }
  .t-o-use--overview {
    padding: 2rem 2.4rem;
    gap: 2rem;
  }
  .logo--container span {
    height: 55px;
    width: 55px;
    font-size: 2.8rem;
  }
  .terms {
    font-size: 1.3rem;
  }
  .terms span {
    font-size: 1.5rem;
  }
}

/* Target: Small Mobile (Below 464px) */
@media (max-width: 29em) {
  /* --- terms.html Specific Adjustments (29em) --- */
  /* Inherits styles from 30em, minimal changes needed */
}

/* Target: Small Mobile (Below 360px) */
@media (max-width: 22.5em) {
  /* --- terms.html Specific Adjustments (22.5em) --- */

  .t-o-use--title {
    padding: 2.4rem 1rem; /* Final padding */
  }
  .t-o-use--title h1 {
    font-size: 1.8rem; /* Final size */
  }
  .t-o-use--overview {
    padding: 1.6rem 2.4rem; /* Final padding */
    gap: 1.6rem; /* Final gap */
  }
  .logo--container span {
    height: 50px; /* Final size */
    width: 50px; /* Final size */
    font-size: 2.5rem; /* Final icon size */
  }
  .terms {
    font-size: 1.2rem; /* Final size */
    line-height: 1.6; /* Adjust if needed */
  }
  .terms span {
    font-size: 1.4rem; /* Final size */
  }
}