/* Created by Content Blocks */
.quote__text {
  position: relative;
}

.gallery-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: auto;
  grid-auto-flow: dense;
}

.quote__slider.quote1 {
  background: rgb(var(--c-neutral-lighter));
  padding: var(--p-s);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.quote__slider.quote2 {
  background: rgb(var(--c-neutral-lighter));
  padding: var(--p-s);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.quote__slider .quote__text::before {
  content: "\f10e";
  color: rgb(var(--c-secondary));
  font-family: "FaSolid", sans-serif;
  font-size: 60px;
  text-align: center;
  opacity: 0.1;
  width: 100%;
  display: block;
  position: absolute;
  bottom: -2rem;
  right: -4rem;
}

/* =============================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 500px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 150px);
    gap: 10px;
    margin: auto;
  }

  .gallery-foto:nth-child(3) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  .gallery-foto:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .gallery-foto:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .gallery-foto:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  .gallery-foto:nth-child(7) {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
  }

  .quote__slider.quote1 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
  }

  .quote__slider.quote2 {
    grid-column: 2 / 5;
    grid-row: 2 / 3;
  }

  .quote__slider .quote__text::before {
    font-size: 80px;
    bottom: -2rem;
    right: -4rem;
  }
}

@media (min-width: 800px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 200px);
  }

  .gallery-foto:nth-child(3) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
  }

  .gallery-foto:nth-child(4) {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
  }

  .gallery-foto:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }

  .gallery-foto:nth-child(6) {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
  }

  .gallery-foto:nth-child(7) {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
  }

  .quote__slider.quote1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .quote__slider.quote2 {
    grid-column: 3 / 7;
    grid-row: 2 / 3;
  }

  .quote__slider .quote__text::before {
    font-size: 80px;
    bottom: -2rem;
    right: -4rem;
  }
}

@media (min-width: 1280px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 300px);
  }

  .gallery-foto:nth-child(3) {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }

  .gallery-foto:nth-child(4) {
    grid-column: 5 / 9;
    grid-row: 1 / 2;
  }

  .gallery-foto:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }

  .gallery-foto:nth-child(6) {
    grid-column: 3 / 7;
    grid-row: 3 / 4;
  }

  .gallery-foto:nth-child(7) {
    grid-column: 7 / 9;
    grid-row: 3 / 4;
  }

  .quote__slider.quote1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .quote__slider.quote2 {
    grid-column: 5 / 9;
    grid-row: 2 / 3;
  }

  .quote__slider .quote__text::before {
    font-size: 120px;
    bottom: -6rem;
    right: -4rem;
  }
}