.home main > section.why {
  margin-top: 0;
  margin-bottom: 0;
}

.why .grid-container {
  max-width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.why .grid-container:before {
  background-image: url(../../etc/images/home-why-orange-arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top right;
  content: "";
  height: 100%;
  width: 323px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
@media (min-width: 1024px) {
  .why .grid-container:before {
    width: 703px;
  }
}
.why .grid {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: 100%;
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .why .grid {
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto 1fr;
  }
}
.why .grid > .heading {
  padding: 0 15px 20px;
  text-align: center;
}
.why .grid > .button-container {
  padding: 30px 15px;
  text-align: center;
}
.why .grid > .photo {
  overflow: hidden;
  margin-bottom: 30px;
}
@media (max-width: 766px) {
  .why .grid > .photo img {
    height: 100%;
    width: 100%;
    aspect-ratio: 656/756;
    object-fit: cover;
  }
}
@media (min-width: 1024px) {
  .why .grid > .photo {
    grid-area: 1/1/4/1;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
  }
  .why .grid > .photo img {
    object-fit: contain;
    object-position: top left;
    height: 100%;
    width: 100%;
    aspect-ratio: 656/762;
    max-height: 752px;
    opacity: 0;
    margin-left: -1000px;
  }
  .why .grid > .listing {
    grid-area: 2/2/2/2;
  }
  .why .grid > .heading {
    grid-area: 1/2/1/2;
    padding: 34px 68px 45px;
    text-align: left;
    line-height: 3.625rem;
  }
  .why .grid > .heading h2 {
    margin: 0 0 0 0;
  }
  .why .grid > .button-container {
    grid-area: 3/1/3/3;
    text-align: center;
    padding-top: 45px;
  }
  .why .grid > .button-container .button {
    margin-bottom: 0;
  }
}
.why .listing {
  display: grid;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-columns: 100%;
  gap: 30px;
}
.why .listing .item {
  display: grid;
  grid-template-columns: 55px auto;
  grid-template-rows: auto;
  gap: 25px;
  padding: 0 15px;
}
@media (min-width: 767px) {
  .why .listing .item {
    grid-template-columns: 71px auto;
    padding: 0 68px;
  }
}
.why .listing .item .photo {
  grid-area: 1/1/1/1;
}
.why .listing .item .content {
  grid-area: 1/2/1/2;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .why .listing .item .content {
    max-width: 381px;
  }
}
.why .listing .item .photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.why .listing .item .content span {
  display: block;
}
.why .listing .item .content span.description {
  font-size: 1.25rem;
  line-height: 1.5rem;
}
.why.active > .grid-container > .grid > .photo img {
  margin-left: 0;
  opacity: 1;
  transition: margin-left 1.5s ease-in-out, opacity 1.5s ease-in-out;
}