@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* HOMAGE FONT */
body, p, div, span, li, h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", serif !important;
}

/* KEEP THE HEADER CENTERED */
h1, h2, h3, h4,
[class*="heading"],
[class*="title"] {
  text-align: center !important;
}

/* Leave all images alone by default */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Vertically center the image column next to the text column */
.row:has(> .bl-image.image-highlight-right) {
  display: flex !important;
  align-items: center !important;
}

/* Desktop: image right, text left */
.row:has(> .bl-image.image-highlight-right) > .bl-image.image-highlight-right {
  order: 2 !important;
}

.row:has(> .bl-image.image-highlight-right) > .bl-content {
  order: 1 !important;
}

/* Float animation, scoped ONLY to the leaf image */
@keyframes leafFloat {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(3px, -6px) rotate(1deg); }
  50%  { transform: translate(-2px, -3px) rotate(-1deg); }
  75%  { transform: translate(-4px, -8px) rotate(0.5deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

img[src*="038ff6dda715812b0392"] {
  animation: leafFloat 6s ease-in-out infinite;
}

/* MOBILE VERSION */
@media (max-width: 768px) {

  .row:has(> .bl-image.image-highlight-right) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* PHOTO FIRST */
  .row:has(> .bl-image.image-highlight-right) > .bl-image.image-highlight-right {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .row:has(> .bl-image.image-highlight-right) > .bl-image.image-highlight-right img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* TEXT SECOND */
  .row:has(> .bl-image.image-highlight-right) > .bl-content {
    order: 2 !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 0 30px 50px 30px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* CENTER ALL TEXT */
  .row:has(> .bl-image.image-highlight-right) .bl-content,
  .row:has(> .bl-image.image-highlight-right) .bl-content p,
  .row:has(> .bl-image.image-highlight-right) .bl-content div,
  .row:has(> .bl-image.image-highlight-right) .bl-content span,
  .row:has(> .bl-image.image-highlight-right) .bl-content li,
  .row:has(> .bl-image.image-highlight-right) .bl-content h1,
  .row:has(> .bl-image.image-highlight-right) .bl-content h2,
  .row:has(> .bl-image.image-highlight-right) .bl-content h3,
  .row:has(> .bl-image.image-highlight-right) .bl-content h4 {
    text-align: center !important;
  }

  .row:has(> .bl-image.image-highlight-right) .bl-content p {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.45 !important;
  }

  .row:has(> .bl-image.image-highlight-right) .bl-content p + p {
    margin-top: 24px !important;
  }

  .row:has(> .bl-image.image-highlight-right) .bl-content h1,
  .row:has(> .bl-image.image-highlight-right) .bl-content h2,
  .row:has(> .bl-image.image-highlight-right) .bl-content h3 {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 28px !important;
    line-height: 1.1 !important;
  }

  .row:has(> .bl-image.image-highlight-right) .bl-content ul,
  .row:has(> .bl-image.image-highlight-right) .bl-content ol {
    display: inline-block !important;
    margin: 15px auto 30px auto !important;
    padding-left: 0 !important;
    list-style-position: inside !important;
    text-align: center !important;
  }

  .row:has(> .bl-image.image-highlight-right) .bl-content li {
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
  }
}