@import url("https://graybroscafeteria.com/templates/newtralize/css/blocks/homestyle-banner.css");

.com-content-article {
  padding: 0;
}

.four-ways {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "heading"
    "steps"
    "order"
    "photos";
  row-gap: 32px;
  padding: 48px 0;
  color: var(--clr-primary-100);
}

@media (min-width: 50em) {
  .four-ways {
    grid-template-columns: 3fr 2fr;
    grid-template-areas: 
      "heading heading"
      "photos steps";
    column-gap: 50px;
  }
}

.four-ways__order {
  grid-area: order;
  justify-self: center;
}

@media (min-width: 50em) {
  .four-ways__order {
    display: none;
  }
}

.four-ways__heading {
  grid-area: heading;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  max-width: 12ch;
  font-size: clamp(2.5rem, 2.045rem + 2.27vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
}

@media (min-width: 45em) {
  .four-ways__heading {
    max-width: unset;
  }
}

.four-ways__four {
  font-size: clamp(8rem, 7.455rem + 2.73vw, 9.5rem);
}

.four-ways__photos {
  grid-area: photos;
  display: grid;
  gap: clamp(0.625rem, 0.398rem + 1.14vw, 1.25rem);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.four-ways__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.four-ways__steps {
  grid-area: steps;
  list-style: none;
  counter-reset: fourways;
  display: grid;
  gap: 32px;
}

.four-ways__steps li {
  counter-increment: fourways;
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.four-ways__steps ::before {
  content: counter(fourways);
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  width: clamp(3rem, 2.636rem + 1.82vw, 4rem);
  height: clamp(3rem, 2.636rem + 1.82vw, 4rem);
  border: 4px solid currentColor;
  border-radius: 100vw;
}

.actions-grid {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 64px;
}

@media (min-width: 50em) {
  .actions-grid {
    /* grid-template-columns: repeat(3, 1fr); */
  }
}

.actions-grid__item {
  display: grid;
  place-content: center;
  min-height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--clr-white);
  font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 150ms;
}

.actions-grid__item:is(:hover, :focus-visible) {
  opacity: 0.93;
}

.actions-grid__item > span {
  max-width: 10ch;
  text-align: center;
  text-wrap: balance;
}

.review-wrapper {
  display: grid;
  gap: 1rem;
}

@media (min-width: 45em) {
  .review-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .reviews-image {
    grid-column: span 2;
    grid-row: span 2;
  }

  .reviews-button {
    grid-column: span 4;
  }
}

.reviews-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews {
  display: contents;
}

.review {
  display: grid;
  align-content: start;
  row-gap: 0.5rem;
  padding: 1rem;
}

.reviews[data-state="collapsed"] .review:nth-child(n + 5) {
  display: none;
}

.review:not(:first-of-type) {
  border-block-start: 1px solid #dadce0;
}

.review-header h3 {
  margin: 0;
  margin-block-end: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.review-header .review-rating {
  color: #f3a929;
}

.review-header .review-rating[data-rating="4"] > :last-child {
  color: #dadce0;
}

.review p + p {
  margin-block-start: 0.75em;
}

.reviews-button {
  margin-block: 1rem;
  text-align: center;
}

.reviews[data-state="expanded"] + .reviews-button {
  display: none;
  visibility: hidden;
}

@media (min-width: 992px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .review {
    border: 1px solid #dadce0;
  }
}