/* //////////////////////////////////////////////////

Title : facilities-meals.scss
For   : hospis/

Created       : 2025-10-04
Last Modified : 2025-10-09

==========================================

Content

////////////////////////////////////////////////// */
/**
 * common
 */
.l-facilities-meals__section {
  max-width: var(--container-wide);
  width: 100%;
  margin-inline: auto;
}

.c-facilities-meals__shell {
  display: grid;
}
.c-facilities-meals__heading {
  --heading-line-height: 1;
  --heading-letter-spacing: 0;
}
.c-facilities-meals__heading::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS43OTkiIGhlaWdodD0iMTkuNzk5IiB2aWV3Qm94PSIwIDAgMTkuNzk5IDE5Ljc5OSI+IDxnIGlkPSLplbfmlrnlvaJfNjQyIiBkYXRhLW5hbWU9IumVt+aWueW9oiA2NDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgOS45KSByb3RhdGUoLTQ1KSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjNDVhNGQwIiBzdHJva2Utd2lkdGg9IjEiPiA8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHN0cm9rZT0ibm9uZSIvPiA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSJub25lIi8+IDwvZz48L3N2Zz4=");
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-facilities-meals__thumbnail {
  overflow: hidden;
}
.c-facilities-meals__description-message {
  font-size: 1.6rem;
  line-height: 1.875;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .l-facilities-meals__section {
    -webkit-padding-start: 2.5rem;
            padding-inline-start: 2.5rem;
  }
  .c-facilities-meals__shell {
    grid-template-columns: 100%;
    gap: 2rem;
  }
  .c-facilities-meals__shell + .c-facilities-meals__shell {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
  }
  .c-facilities-meals__heading::before {
    width: 1.4rem;
    height: 1.4rem;
  }
  .c-facilities-meals__thumbnail {
    border-top-left-radius: 3.8rem;
    border-bottom-left-radius: 3.8rem;
  }
  .c-facilities-meals__description {
    -webkit-padding-before: 1rem;
            padding-block-start: 1rem;
    -webkit-padding-end: 2.5rem;
            padding-inline-end: 2.5rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-facilities-meals__shell {
    --shell-gutter: calc(100% - 63rem);
    --shell-thumbnail-column: 80rem;
    justify-content: center;
    row-gap: 4rem;
    -moz-column-gap: 13rem;
         column-gap: 13rem;
  }
  .c-facilities-meals__shell + .c-facilities-meals__shell {
    -webkit-margin-before: 8rem;
            margin-block-start: 8rem;
  }
  .c-facilities-meals__shell:nth-of-type(odd) {
    grid-template-columns: 1fr var(--shell-thumbnail-column);
  }
  .c-facilities-meals__shell:nth-of-type(odd) .c-facilities-meals__heading {
    grid-column: 1;
    -webkit-padding-start: var(--shell-gutter);
            padding-inline-start: var(--shell-gutter);
  }
  .c-facilities-meals__shell:nth-of-type(odd) .c-facilities-meals__thumbnail {
    grid-column: 2;
    border-top-left-radius: 5.8rem;
    border-bottom-left-radius: 5.8rem;
  }
  .c-facilities-meals__shell:nth-of-type(odd) .c-facilities-meals__description {
    grid-column: 1;
    -webkit-padding-start: var(--shell-gutter);
            padding-inline-start: var(--shell-gutter);
  }
  .c-facilities-meals__shell:nth-of-type(even) {
    grid-template-columns: var(--shell-thumbnail-column) 1fr;
  }
  .c-facilities-meals__shell:nth-of-type(even) .c-facilities-meals__heading {
    grid-column: 2;
    -webkit-padding-end: var(--shell-gutter);
            padding-inline-end: var(--shell-gutter);
  }
  .c-facilities-meals__shell:nth-of-type(even) .c-facilities-meals__thumbnail {
    grid-column: 1;
    border-top-right-radius: 5.8rem;
    border-bottom-right-radius: 5.8rem;
  }
  .c-facilities-meals__shell:nth-of-type(even) .c-facilities-meals__description {
    grid-column: 2;
    -webkit-padding-end: var(--shell-gutter);
            padding-inline-end: var(--shell-gutter);
  }
  .c-facilities-meals__heading {
    grid-row: 1;
    align-self: end;
  }
  .c-facilities-meals__heading::before {
    width: 2rem;
    height: 2rem;
  }
  .c-facilities-meals__thumbnail {
    grid-row: span 2;
    align-self: start;
  }
  .c-facilities-meals__description {
    grid-row: 2;
    align-self: start;
  }
}
/*# sourceMappingURL=facilities-meals.css.map */