:root {
  --clr-primary: #39539e;
  --clr-secondary: #50bfe2;
  --clr-accent: #ffb104;
  --clr-headings: #444;
  /*
   * spaces
   */
  --spc-1: 0.625rem;
  --spc-2: 1.25rem;
  --spc-3: 1.875rem;
  --spc-4: 3.125rem;
  --spc-5: calc(var(--spc-lg) * 2);
  /*
   * font sizes
   */
  --fs-1: 0.75rem;
  --fs-2: 1.125rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2.5rem;
  --container-mw: 1080px;
  /*
  * media query to adjust styles here 
  */
}

.card-01 {
  display: flex;
  position: relative;
  padding: var(--spc-3);
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  gap: var(--spc-3);
  align-items: center;
  flex-direction: column;
}
.card-01:hover {
  cursor: pointer;
}
.card-01:hover h3 {
  color: #000;
}
.card-01 img {
  width: min(100%, 12.5rem);
}
.card-01 h3 {
  margin: 0;
  color: var(--clr-headings);
  font-size: 1rem;
  font-weight: 700;
}
.card-01 p {
  font-size: 0.9em;
  margin-top: calc(var(--spc-1) * -1);
  margin-bottom: 0;
}
.card-01 a {
  position: absolute;
  color: inherit;
  inset: 0 0 0 0;
}

.technologies-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.technologies-list-item {
  width: min(100%, 11.25rem);
  padding: var(--spc-3);
  position: relative;
  text-align: center;
}
.technologies-list-item img {
  display: inline-block;
  max-width: 100%;
  height: 5rem;
  object-fit: contain;
}
.technologies-list-item a {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
}

.landing-page-01--hero {
  padding: var(--spc-4) var(--spc-2);
  color: #fff;
  background-color: var(--clr-primary);
}
.landing-page-01--hero > div {
  display: flex;
  gap: var(--spc-3);
  flex-direction: column;
}
@media only screen and (min-width: 48em) {
  .landing-page-01--hero > div {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr minmax(30rem, 1fr);
    grid-column-gap: calc(var(--spc-4) * 1.5);
  }
}
.landing-page-01--hero h1 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}
@media only screen and (min-width: 36em) {
  .landing-page-01--hero h1 {
    font-size: 2.5rem;
  }
}
.landing-page-01--hero summary {
  margin-block-start: 1.5rem;
}
.landing-page-01--hero img {
  display: block;
  width: min(100%, 500px);
}
.landing-page-01--content hr {
  margin: 75px 0;
}
.landing-page-01--heading {
  margin: 0 0 var(--spc-3);
  color: var(--clr-headings);
  font-size: 1.5rem;
}
@media only screen and (min-width: 36em) {
  .landing-page-01--heading {
    margin: 0 0 var(--spc-4);
    font-size: 2rem;
  }
}
.landing-page-01--blobs {
  column-gap: calc(var(--spc-4) * 1.5);
}
@media only screen and (min-width: 48em) {
  .landing-page-01--blobs {
    columns: var(--cols, 2);
  }
}
@media only screen and (min-width: 62em) {
  .landing-page-01--blobs.col-count-4 {
    columns: 2;
  }
}
.landing-page-01--services-list {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
  grid-gap: var(--spc-4);
  margin-right: auto;
  margin-left: auto;
}
.landing-page-01--services-list.two-cols {
  width: min(100%, 43.75rem);
}
.landing-page-01--services-list.connected {
  position: relative;
}
@media screen and (min-width: 655px) {
  .landing-page-01--services-list.connected::before {
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    content: "";
    width: var(--spc-3);
    height: var(--spc-3);
    position: absolute;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 0H18V30H13V0Z' fill='%2339539E'/%3E%3Cpath d='M2.18557e-07 18L0 13L30 13V18L2.18557e-07 18Z' fill='%2339539E'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }
}
.landing-page-01--services-list.connected .card-01:not(:last-child)::before {
  inset: auto auto -40px 50%;
  translate: -50%;
  content: "";
  width: var(--spc-3);
  height: var(--spc-3);
  position: absolute;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 0H18V30H13V0Z' fill='%2339539E'/%3E%3Cpath d='M2.18557e-07 18L0 13L30 13V18L2.18557e-07 18Z' fill='%2339539E'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  pointer-events: none;
}
@media screen and (min-width: 655px) {
  .landing-page-01--services-list.connected .card-01:not(:last-child)::before {
    display: none;
  }
}
.landing-page-01--technologies h4 {
  margin: 0 0 var(--spc-3);
  color: var(--clr-headings);
  text-align: center;
}

.util--boxed-content {
  width: min(100%, var(--container-mw));
  margin-right: auto;
  margin-left: auto;
}

.util--sec {
  padding: var(--spc-4) var(--spc-2);
}

.util--sub-sec {
  margin-bottom: calc(var(--spc-4) * 1.5);
}

/*# sourceMappingURL=landing-page-v01.css.map */