.section-images {
  margin: 5rem 0;
}
.section-images .container .content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.section-images .container .content :is(h1, h2) {
  margin-bottom: 20px;
}
.section-images .container .images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  grid-auto-flow: dense;
}
.section-images .container .images:not(:first-child) {
  margin-top: 60px;
}
.section-images .container .images .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
.section-images .container .images .image:nth-child(8n+1) {
  grid-column: 1/3;
  grid-row: span 2;
}
.section-images .container .images .image:nth-child(8n+2) {
  grid-column: 3/5;
  grid-row: span 1;
}
.section-images .container .images .image:nth-child(8n+3) {
  grid-column: 3/4;
  grid-row: span 1;
}
.section-images .container .images .image:nth-child(8n+4) {
  grid-column: 4/5;
  grid-row: span 1;
}
.section-images .container .images .image:nth-child(8n+5) {
  grid-column: 3/5;
  grid-row: span 2;
}
.section-images .container .images .image:nth-child(8n+6) {
  grid-column: 1/3;
  grid-row: span 1;
}
.section-images .container .images .image:nth-child(8n+7) {
  grid-column: 1/2;
  grid-row: span 1;
}
.section-images .container .images .image:nth-child(8n+8) {
  grid-column: 2/3;
  grid-row: span 1;
}
.section-images .container .images .carousel-btns {
  display: none;
}

@media (max-width: 550px) {
  .section-images .container .images {
    grid-gap: 8px;
  }
}
/*

Options - Theme - Logos

*/
.section-images[options~=theme-logos] .container .images {
  display: flex;
  justify-content: center;
  grid-gap: 5px;
  flex-wrap: wrap;
}
.section-images[options~=theme-logos] .container .images .image {
  background-color: #f2f2f2;
  width: calc(20% - 4px);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}
.section-images[options~=theme-logos] .container .images .image img {
  max-width: 50%;
  max-height: 75px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  transition: all 0.2s;
  border-radius: unset;
}
.section-images[options~=theme-logos] .container .images .image:hover {
  background-color: #e9e9e9;
}
.section-images[options~=theme-logos] .container .images .image:hover img {
  filter: grayscale(0);
}

@media (max-width: 860px) {
  .section-images[options~=theme-logos] .container .images .image {
    width: calc(25% - 4px);
  }
}
@media (max-width: 660px) {
  .section-images[options~=theme-logos] .container .images .image {
    width: calc(33% - 4px);
  }
}
@media (max-width: 500px) {
  .section-images[options~=theme-logos] .container .images .image {
    width: calc(50% - 3px);
  }
}
/*

Options - Theme - Carousel

*/
.section-images[options~=theme-carousel] .container {
  width: 100%;
  max-width: unset;
}
.section-images[options~=theme-carousel] .images {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  height: 100vh;
}
.section-images[options~=theme-carousel] .images .image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.section-images[options~=theme-carousel] .images .image.active {
  opacity: 1;
}
.section-images[options~=theme-carousel] .images .image img {
  width: 100%;
  display: block;
  border-radius: 0;
  -o-object-position: center;
     object-position: center;
}
.section-images[options~=theme-carousel] .images .image .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
}
.section-images[options~=theme-carousel] .images .image .caption > :last-child {
  margin-bottom: 0;
}
.section-images[options~=theme-carousel] .images .carousel-btns {
  display: block;
  opacity: 0;
  transition: all 0.5s;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev, .section-images[options~=theme-carousel] .images .carousel-btns .carousel-next {
  position: absolute;
  bottom: 0;
  cursor: pointer;
  transition: all 0.3s;
  height: 100%;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev:before, .section-images[options~=theme-carousel] .images .carousel-btns .carousel-next:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
  opacity: 0;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev svg, .section-images[options~=theme-carousel] .images .carousel-btns .carousel-next svg {
  width: 50px;
  position: relative;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev svg path, .section-images[options~=theme-carousel] .images .carousel-btns .carousel-next svg path {
  fill: var(--white);
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev:hover:before, .section-images[options~=theme-carousel] .images .carousel-btns .carousel-next:hover:before {
  opacity: 1;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev {
  left: 0;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-prev:before {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-next {
  right: 0;
}
.section-images[options~=theme-carousel] .images .carousel-btns .carousel-next:before {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.section-images[options~=theme-carousel] .images:hover .carousel-btns {
  opacity: 1;
}

/*

Options - Background Color - Gradient

*/
.section-images[options~=background-gradient] {
  background-image: var(--background-gradient-primary);
  margin: 0;
  padding: 7rem 0;
}

/*

Options - Background Color - Gradient Secondary

*/
.section-images[options~=background-gradient-secondary] {
  background-image: var(--background-gradient-secondary);
  margin: 0;
  padding: 7rem 0;
}

/*

Options - Small container

*/
.section-images[options~=small-container] .container .content {
  max-width: 600px;
}