:root {
  --locations-blue: #1769e0;
  --locations-blue-dark: #0d4fb5;
  --locations-text: #172033;
  --locations-muted: #667085;
  --locations-border: #e7ecf3;
  --locations-white: #ffffff;
  --locations-soft: #f5f8ff;
  --locations-green: #22a06b;
}

.locations-section {
  padding: 105px 0;

  background: #f7f9fc;
}

.locations-container {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;
}


/* ==================== HEADING ==================== */

.locations-heading {
  display: grid;

  grid-template-columns: 1fr 0.8fr;

  align-items: end;

  gap: 60px;
}

.locations-eyebrow {
  display: inline-block;

  margin-bottom: 14px;

  color: var(--locations-blue);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.4px;
}

.locations-heading h2 {
  max-width: 650px;

  margin: 0;

  color: var(--locations-text);

  font-size: clamp(38px, 4.5vw, 54px);
  line-height: 1.08;

  letter-spacing: -2px;

  font-weight: 800;
}

.locations-heading h2 span {
  color: var(--locations-blue);
}

.locations-heading > p {
  margin: 0;

  color: var(--locations-muted);

  font-size: 15px;
  line-height: 1.75;
}


/* ==================== GRID ==================== */

.locations-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-top: 60px;
}

.location-card {
  position: relative;

  min-height: 170px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 22px;

  border: 1px solid var(--locations-border);
  border-radius: 17px;

  background: var(--locations-white);

  text-decoration: none;

  box-shadow:
    0 8px 25px rgba(23, 32, 51, 0.035);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.location-card:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 105, 224, 0.32);

  box-shadow:
    0 18px 38px rgba(23, 105, 224, 0.10);
}

.location-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--locations-soft);

  color: var(--locations-blue);

  font-size: 18px;
  font-weight: 800;
}

.location-content {
  padding-top: 22px;
}

.location-content h3 {
  margin: 0;

  color: var(--locations-text);

  font-size: 15px;
  font-weight: 800;
}

.location-content p {
  margin: 5px 0 0;

  color: var(--locations-muted);

  font-size: 11px;
  line-height: 1.5;
}

.location-arrow {
  position: absolute;

  right: 20px;
  bottom: 20px;

  color: #9ba7b9;

  font-size: 17px;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.location-card:hover .location-arrow {
  color: var(--locations-blue);

  transform: translateX(3px);
}


/* ==================== MORE CARD ==================== */

.location-card-more {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f3f7ff
    );
}

.location-card-more .location-icon {
  background: var(--locations-blue);

  color: var(--locations-white);
}


/* ==================== NOTE ==================== */

.locations-note {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 27px;

  padding: 16px 19px;

  border: 1px solid rgba(34, 160, 107, 0.12);
  border-radius: 13px;

  background: rgba(34, 160, 107, 0.045);
}

.locations-note-icon {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  flex: 0 0 25px;

  border-radius: 50%;

  background: rgba(34, 160, 107, 0.10);

  color: var(--locations-green);

  font-size: 11px;
  font-weight: 800;
}

.locations-note p {
  margin: 0;

  color: var(--locations-muted);

  font-size: 11px;
  line-height: 1.55;
}


/* ==================== TABLET ==================== */

@media (max-width: 950px) {

  .locations-section {
    padding: 80px 0;
  }

  .locations-heading {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .locations-heading > p {
    max-width: 650px;
  }

  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==================== MOBILE ==================== */

@media (max-width: 600px) {

  .locations-section {
    padding: 65px 0;
  }

  .locations-container {
    width: calc(100% - 28px);
  }

  .locations-heading h2 {
    font-size: 36px;

    letter-spacing: -1.4px;
  }

  .locations-heading > p {
    font-size: 14px;
  }

  .locations-grid {
    grid-template-columns: 1fr;

    margin-top: 42px;

    gap: 13px;
  }

  .location-card {
    min-height: 145px;

    padding: 20px;
  }

  .location-content {
    padding-top: 18px;
  }

  .locations-note {
    align-items: flex-start;
  }
}