/* ----- Mixins ----- */
@keyframes line-animation {
  0% {
    background-position: 100% var(--line-position);
    background-size: 100% var(--line-height);
  }
  35% {
    background-position: 100% var(--line-position);
    background-size: 0 var(--line-height);
  }
  36% {
    background-position: 0 var(--line-position);
    background-size: 0 var(--line-height);
  }
  100% {
    background-position: 0 var(--line-position);
    background-size: 100% var(--line-height);
  }
}
.contact {
  --min-height: clamp(10em, 40vh, 25em);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.contact__image-wrapper {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
}
.contact__map {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  min-height: var(--min-height);
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.contact__content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  align-items: center;
  gap: 1em;
  overflow: hidden;
  color: var(--color-white);
  width: 100%;
  min-height: var(--min-height);
}
.contact__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-primary-rgb), 0.95);
  z-index: 2;
}
.contact__text {
  z-index: 5;
  padding: clamp(2em, 5vw, 4em);
  color: var(--color-white);
}
.contact__text h2,
.contact__text h3,
.contact__text h4 {
  font-size: var(--font-size-36);
  letter-spacing: normal;
  margin-bottom: 1em;
  font-family: "Lora", serif;
  font-weight: var(--regular);
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
}
.contact__text a {
  color: var(--color-white);
}
.contact__text a:hover {
  color: var(--color-secondary);
}
.contact__text p {
  font-size: var(--font-size-16);
}
.contact__text p:not(:last-child) {
  margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  .contact {
    display: block;
  }
  .contact__image-wrapper {
    aspect-ratio: 16/9;
  }
  .contact__map {
    aspect-ratio: 16/9;
  }
}
@media screen and (max-width: 480px) {
  .contact__image-wrapper,
  .contact__map {
    aspect-ratio: 4/3;
  }
}