.pin {
  --section-h: 824px;
  --section-py: 140px;
  --section-px: 0px;
  --section-bg: transparent;
  --heading-size: 40px;
  --heading-mb: 30px;
  --heading-align: center;
  --sub-heading-color: #f5f5f5;
  --sub-heading-size: 18px;
  --heading-w: 896px;
  --sub-heading-mb: 32px;
  --background-image-filter-h: 494px;
  --icon-list-col-gap: 120px;
  --icon-list-col-gap-2: 120px;
  --icon-list-row-gap: 20px;
  --icon-list-item-size: 72px;
  --icon-size: 72px;
  --icon-mb: 8px;
  --icon-title-size: 16px;
}

@media screen and (max-width: 679px) {
  .pin {
    --section-h: 834px;
    --section-py: 48px;
    --section-px: 27px;
    --section-bg: #02060b;
    --heading-size: 24px;
    --heading-mb: 20px;
    --heading-align: center;
    --sub-heading-color: #6e6e73;
    --sub-heading-size: 14px;
    --sub-heading-mb: 20px;
    --heading-w: 100%;
    --background-image-filter-h: 0px;
    --icon-list-col-gap: 40px;
    --icon-list-col-gap-2: 80px;
    --icon-list-row-gap: 40px;
    --icon-list-item-size: 72px;
    --icon-size: 56px;
    --icon-mb: 8px;
    --icon-title-size: 14px;
  }
}

@media screen and (min-width: 680px) and (max-width: 959px) {
  .pin {
    --section-h: 1511.6px;
    --section-py: 87px;
    --section-px: 30px;
    --section-bg: #02060b;
    --heading-size: 32px;
    --heading-mb: 65px;
    --heading-align: left;
    --sub-heading-color: #6e6e73;
    --sub-heading-size: 24px;
    --sub-heading-mb: 80px;
    --heading-w: 100%;
    --background-image-filter-h: 0px;
    --icon-list-col-gap: 72.5px;
    --icon-list-col-gap-2: 145px;
    --icon-list-row-gap: 80px;
    --icon-list-item-size: 130.5px;
    --icon-size: 101.5px;
    --icon-mb: 14.5px;
    --icon-title-size: 24px;
  }
}

@media screen and (min-width: 960px) and (max-width: 1439px) {
  .pin {
    --section-h: 700px;
    --section-py: 100px;
    --section-bg: transparent;
    --heading-size: 32px;
    --heading-mb: 24px;
    --heading-align: center;
    --sub-heading-color: #f5f5f5;
    --sub-heading-size: 20px;
    --sub-heading-mb: 35.75px;
    --heading-w: 742px;
    --background-image-filter-h: 492.5px;
    --icon-list-col-gap: 100px;
    --icon-list-col-gap-2: 100px;
    --icon-list-row-gap: 9.5px;
    --icon-list-item-size: 90px;
    --icon-size: 70px;
    --icon-mb: 10px;
    --icon-title-size: 20px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .pin {
    --section-h: 720px;
    --section-py: 100px;
    --section-px: 0;
    --section-bg: transparent;
    --heading-size: 36px;
    --heading-mb: 20px;
    --heading-align: center;
    --sub-heading-color: #ffffff;
    --sub-heading-size: 18px;
    --sub-heading-mb: 20px;
    --heading-w: 828px;
    --background-image-filter-h: 494px;
    --icon-list-col-gap: 120px;
    --icon-list-col-gap-2: 120px;
    --icon-list-row-gap: 20px;
    --icon-list-item-size: 72px;
    --icon-size: 72px;
    --icon-mb: 8px;
    --icon-title-size: 16px;
  }
}

.pin {
  position: relative;
  z-index: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  padding: var(--section-py) var(--section-px);
  height: var(--section-h);

  color: #ffffff;
  background: var(--section-bg);
}
.pin__heading {
  width: var(--heading-w);

  font-weight: 700;
  font-size: var(--heading-size);
  line-height: 120%;
  letter-spacing: 0px;
  text-align: var(--heading-align);

  margin-bottom: var(--heading-mb);
}
.pin__sub-heading {
  width: var(--heading-w);

  font-weight: 400;
  font-size: var(--sub-heading-size);
  line-height: 140%;
  letter-spacing: 0px;
  text-align: var(--heading-align);

  color: var(--sub-heading-color);

  margin-bottom: var(--sub-heading-mb);
}

.pin__background-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  width: 100%;
  height: 100%;
}
.pin__background-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: var(--background-image-filter-h);
  background: linear-gradient(180deg, #010e05 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.pin__background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pin__list {
  display: flex;
  flex-direction: row;
  column-gap: var(--icon-list-col-gap);
}
.pin__list ~ .pin__list {
  margin-top: var(--icon-list-row-gap);
  column-gap: var(--icon-list-col-gap-2);
}
.pin__list-item-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--icon-list-item-size);
}
.pin__list-item-image__img {
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: cover;
  margin-bottom: var(--icon-mb);
}
.pin__list-item-image__title {
  font-weight: 400;
  font-size: var(--icon-title-size);
  line-height: 140%;
  letter-spacing: 0px;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 679px) {
  .pin__background-image-wrapper {
    position: relative;
    width: calc(100% + calc(var(--section-px) * 2));
    height: 300px;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 680px) and (max-width: 959px) {
  .pin__background-image-wrapper {
    position: relative;
    width: calc(100% + calc(var(--section-px) * 2));
    height: 544px;
    margin-bottom: 64px;
  }
}