@layer general {
  .section-title {
    font-size: var(--fs-3xl);
    color: var(--clr-primary-500);
  }

  main > section {
    padding-block: calc(var(--global-space) * 3);
  }

  section#hero {
    position: relative;

    background-color: var(--clr-primary-400);
    color: var(--text-color-alternative);

    isolation: isolate;
  }
  section#hero :not(.button) {
    text-shadow: var(--shadow-sm);
  }
  section#hero .image-loader {
    position: absolute;
    inset: 0;

    opacity: 0.6;

    z-index: -1;
  }
  section#hero .wrapper {
    min-height: 50vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
  }
  section#hero h1 {
    font-size: var(--fs-4xl);
  }
  section#hero p {
    font-size: var(--fs-large);
  }
  section#hero .button {
    --button-border-color: var(--clr-secondary-400);
    --buton-background-color: var(--clr-secondary-400);
    --button-border-color-hover: var(--clr-secondary-300);
    --buton-background-color-hover: var(--clr-secondary-300);

    text-transform: uppercase;
  }

  section#services ul {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--global-space);
  }
  @media screen and (width < 640px) {
    section#services ul {
      grid-template-columns: 1fr;
    }
  }
  section#services .service-link {
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    gap: var(--global-space);

    padding: var(--global-space);

    border-radius: var(--border-radius);

    background-color: hsl(var(--hsl-primary-100), 0.1);
    box-shadow: var(--shadow-sm);

    transition: background-color 500ms ease-in-out;
  }
  section#services .service-link:hover {
    background-color: hsl(var(--hsl-primary-100), 0.15);
  }
  .service-link img {
    margin-inline: auto;

    width: 100%;
    max-width: calc(var(--global-space) * 10);
  }
  .service-link h3 {
    font-family: sans-serif;
    color: var(--clr-primary-400);
  }
  .service-link .button {
    --button-border-size: 0px;
    --buton-background-color: var(--clr-primary-400);
    --buton-background-color-hover: var(--clr-primary-100);

    color: var(--text-color-alternative);

    width: 100%;
    margin-block-start: auto;
  }

  section#about .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--global-space) * 4);
  }
  @media screen and (width < 640px) {
    section#about .wrapper {
      grid-template-columns: 1fr;
    }
  }
  section#about .image-loader {
    border: 6px solid var(--clr-secondary-400);
    border-radius: var(--border-radius);

    box-shadow: var(--shadow-sm);
  }
  @media screen and (width < 768px) {
    section#about .image-loader {
      display: none;
    }
  }
  section#about ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--global-space) / 2);

    font-family: serif;
    font-style: italic;
  }
  @media screen and (width < 640px) {
    section#about ul {
      grid-template-columns: 1fr;
    }
  }
  section#about li {
    margin-inline-start: var(--global-space);
  }
  section#about li::marker {
    color: var(--clr-secondary-400);
  }

  section#more .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--global-space) * 4);
  }
  @media screen and (width < 640px) {
    section#more .wrapper {
      grid-template-columns: 1fr;
    }
  }
  section#more .image-loader {
    border: 6px solid var(--clr-secondary-400);
    border-radius: var(--border-radius);

    box-shadow: var(--shadow-sm);
  }
  @media screen and (width < 768px) {
    section#more .image-loader {
      display: none;
    }
  }
  section#more a {
    color: var(--clr-secondary-400);
    font-weight: bold;
  }

  section#cta {
    position: relative;

    text-shadow: var(--shadow-sm);
    text-align: center;
    color: var(--clr-primary-400);

    isolation: isolate;
  }
  section#cta .image-loader {
    --image-position: 50% 35%;

    position: absolute;
    inset: 0;

    mask-image: linear-gradient(transparent 15%, hsl(0, 0%, 0%, 0.75));
    -webkit-mask-image: linear-gradient(transparent 15%, hsl(0, 0%, 0%, 0.75));
    opacity: 0.8;

    z-index: -1;
  }
  section#cta h2 {
    font-size: var(--fs-3xl);

    line-height: 1;
  }
  section#cta p {
    font-size: var(--fs-large);
  }
  section#cta .button {
    --button-border-size: 0px;
    --buton-background-color: var(--clr-secondary-400);
    --buton-background-color-hover: var(--clr-secondary-300);

    color: var(--text-color-alternative);
  }
}