web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css

.container {
  border-radius: var(--Corner-radius-Large);
  background-color: var(--Main-Brand-WarmWhite);
  padding: 0 var(--Spacing-x2);
  display: flex;
  gap: var(--Spacing-x5);
}

@media screen and (min-width: 900px) {
  .container {
    padding: 0 var(--Spacing-x4) 0 0;
  }
}

.iconContainer {
  display: none;
}

@media screen and (min-width: 900px) {
  .iconContainer {
    flex: 0 1 384;
    display: flex; /* gets rid of whitespace */
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x3);
  padding: var(--Spacing-x3) 0;
  flex: 1;
}

.textContent {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x2);
}

.header {
  display: grid;
  gap: var(--Spacing-x-quarter);
}

.scriptedText {
  display: inline-block;
}

.usp {
  list-style: none;
  display: grid;
  gap: var(--Spacing-x1);
}

@media screen and (min-width: 768px) {
  .usp {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column;
    padding: var(--Spacing-x-one-and-half) 0;
  }
}

@media screen and (min-width: 900px) {
  .usp {
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .usp {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
  }
}

.usp li {
  display: flex;
  gap: var(--Spacing-x1);
}

.usp li:before {
  content: url("/_static/icons/heart.svg");
  position: relative;
  top: 3px;
}

@media screen and (min-width: 768px) {
  .buttonContainer {
    display: flex;
    width: 180px;
  }
}