/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.paragraph--type--text-image.has-background {
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 50px;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  border: solid 10px var(--body-background);
}
@media (min-width: 992px) {
  .paragraph--type--text-image.has-background {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.paragraph--type--text-image.has-background h3 {
  color: var(--secondary-color);
}
.paragraph--type--text-image .media-video-wrapper {
  position: relative;
}
.paragraph--type--text-image .media-video-wrapper .field--name-field-media {
  position: relative;
  z-index: 5;
}
.paragraph--type--text-image .media-video-wrapper .field--name-field-video-upload {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 4;
}
.paragraph--type--text-image .media-video-wrapper .field--name-field-video-upload div, .paragraph--type--text-image .media-video-wrapper .field--name-field-video-upload article {
  height: 100%;
}
.paragraph--type--text-image .media-video-wrapper .field--name-field-video-upload video {
  border-radius: 24px;
  height: 100%;
  display: none;
  -o-object-fit: cover;
     object-fit: cover;
}
.paragraph--type--text-image .media {
  grid-column: 2/-2;
  position: relative;
}
@media (min-width: 992px) {
  .paragraph--type--text-image .media {
    grid-column: 16/-3;
  }
}
@media (min-width: 1200px) {
  .paragraph--type--text-image .media {
    grid-column: 14/-3;
  }
}
.paragraph--type--text-image .media img, .paragraph--type--text-image .media video {
  border-radius: 24px;
}
.paragraph--type--text-image .media .video-button {
  position: absolute;
  cursor: pointer;
  top: auto;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 40;
  background-color: var(--primary-color);
  padding: 14px;
  border-radius: 24px;
  transition: var(--transition);
  border: solid 5px var(--primary-color);
  max-width: 70px;
}
.paragraph--type--text-image .media .video-button h4 {
  display: none;
}
.paragraph--type--text-image .media .video-button svg {
  margin-bottom: 0px !important;
}
@media (min-width: 576px) {
  .paragraph--type--text-image .media .video-button {
    max-width: 210px;
  }
  .paragraph--type--text-image .media .video-button h4 {
    display: block;
  }
  .paragraph--type--text-image .media .video-button svg {
    margin-bottom: 30px !important;
  }
}
@media (min-width: 992px) {
  .paragraph--type--text-image .media .video-button h4 {
    display: none;
  }
  .paragraph--type--text-image .media .video-button svg {
    margin-bottom: 0px !important;
  }
}
@media (min-width: 1440px) {
  .paragraph--type--text-image .media .video-button h4 {
    display: block;
  }
  .paragraph--type--text-image .media .video-button svg {
    margin-bottom: 60px !important;
  }
}
.paragraph--type--text-image .media .video-button:hover {
  background-color: var(--secondary-color);
}
.paragraph--type--text-image .media .video-button:hover h4 {
  color: var(--primary-color);
}
.paragraph--type--text-image .media .video-button:hover svg path {
  fill: var(--primary-color);
}
@media (min-width: 992px) {
  .paragraph--type--text-image .media .video-button {
    padding: 28px;
    max-width: 250px;
    bottom: 60px;
    margin: 0;
    right: -30px;
    left: auto;
  }
}
@media (min-width: 1600px) {
  .paragraph--type--text-image .media .video-button {
    right: -60px;
  }
}
.paragraph--type--text-image .media .video-button svg {
  margin-bottom: 30px;
  transition: var(--transition);
}
@media (min-width: 992px) {
  .paragraph--type--text-image .media .video-button svg {
    margin-bottom: 60px;
  }
}
.paragraph--type--text-image .media .video-button svg path {
  fill: var(--secondary-color);
}
.paragraph--type--text-image .media .video-button h4 {
  color: var(--secondary-color);
}
.paragraph--type--text-image .media .field--name-field-media-image .field__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.paragraph--type--text-image .content {
  margin-bottom: 35px;
  grid-column: 2/-2;
}
@media (min-width: 992px) {
  .paragraph--type--text-image .content {
    grid-column: 3/span 11;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0px;
  }
}
@media (min-width: 1200px) {
  .paragraph--type--text-image .content {
    grid-column: 3/span 9;
  }
}
.paragraph--type--text-image h3 {
  margin-bottom: 35px;
  color: var(--primary-color);
}
.paragraph--type--text-image .field--name-field-text {
  letter-spacing: 0px;
}
@media (min-width: 992px) {
  .paragraph--type--text-image.media-direction-left .media {
    grid-column: 3/span 9;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .paragraph--type--text-image.media-direction-left .media {
    grid-column: 3/span 11;
  }
}
@media (min-width: 992px) {
  .paragraph--type--text-image.media-direction-left .content {
    grid-column: 15/-3;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .paragraph--type--text-image.media-direction-left .content {
    grid-column: 16/-3;
  }
}