:root {
  --section-margin: 10rem;
  --gap-40: 4rem;
}

@media only screen and (width < 1024px) {
  :root {
    --section-margin: 5rem;
  }
}

section[class^="layout-"] {
  &:not(.extra-margins) .wrapper {
    margin-block-start: var(--section-margin);
  }

  a.btn {
    width: fit-content;
    padding: 12px 24px;
    background-color: var(--teal);
    color: white;
    border-radius: 10px;
    margin-block-start: var(--gap-40);
    transition: background-color 0.3s ease-in-out;

    &:hover {
      background-color: var(--teal-hover);
    }
  }
}

.layout-simple-content .container .social-media-list {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 76px;
  margin-block-start: var(--gap-40);

  h3 {
    color: black;
    margin-block-end: 32px;
  }

  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;

    img {
      display: block;
      max-width: 100%;
    }
  }

  li+li {
    margin-block-start: 0;
  }
}

.layout-simple-content .container .counter-card-list {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(362px, 100%), 1fr));
  gap: 82px;
  margin-block-start: var(--gap-40);

  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;

    img {
      display: block;
      max-width: 100%;
    }
  }

  li+li {
    margin-block-start: 0;
  }
}