:root {
  --primary-color: #c0ffee;
  --secondary-color: #c0ffee;
  --tertiary-color: #c0ffee;
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 48px;
  --spacing-10: 64px;
  --spacing-auto: auto;
  --font-family: "Playfair Display", serif;
  --base-font-weight: 400;
  --base-font-style: normal;
  --base-font-optical-sizing: auto;
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xl: 1400px;
}

body {
  font-family: var(--font-family);
  font-optical-sizing: var(--base-font-optical-sizing);
  font-weight: var(--base-font-weight);
  font-style: var(--base-font-style);
}

.container {
  max-width: 1200px;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  margin-left: var(--spacing-auto);
  margin-right: var(--spacing-auto);
}

@media (min-width: 768px) and (max-width: 1400px) {
  .container {
    padding-left: var(--spacing-6);
  }
}

@media (min-width: 1400px) {
  .container {
    padding-left: var(--spacing-0);
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  .container {
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1400px) {
  .container {
    padding-right: var(--spacing-0);
  }
}

.page .page-title {
  text-align: center;
}

.visual-info {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}

@media (min-width: 768px) {
  .visual-info {
    margin-top: var(--spacing-10);
  }
}

@media (min-width: 768px) {
  .visual-info {
    margin-bottom: var(--spacing-10);
  }
}

.visual-info.left-align {
  text-align: left;
}

.visual-info.right-align {
  text-align: right;
}

.visual-info.justified-align {
  text-align: justify;
}

.visual-info.center-align {
  text-align: center;
}

.picture-panel {
  overflow: hidden;
}

.picture-panel .image {
  width: 100%;
  object-fit: contain;
}

.content-media-panel {
  width: 100%;
  display: flex;
}

.content-media-panel.left {
  flex-direction: column;
}

.content-media-panel.right {
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .content-media-panel.left, .content-media-panel.right {
    flex-direction: row;
  }
}

.content-media-panel .left-panel {
  flex: 1 0;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  align-content: center;
}

@media (min-width: 768px) {
  .content-media-panel .left-panel {
    flex: 1 0 calc(50% - 32px);
  }
}

.content-media-panel .right-panel {
  flex: 1 0;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  align-content: center;
}

@media (min-width: 768px) {
  .content-media-panel .right-panel {
    flex: 1 0 calc(50% - 32px);
  }
}

.content-media-panel .picture-panel .image {
  transition: transform 2s;
}

.content-media-panel .picture-panel .image:hover {
  transform: scale(1.2);
}

@media (min-width: 768px) {
  .content-media-panel .picture-panel .image {
    max-height: 280px;
  }
}