﻿/* common border radius */
/* disable text selection */
section.gt-block.images {
  padding: 4.4rem;
  -webkit-border-radius: 4rem;
  -moz-border-radius: 4rem;
  border-radius: 4rem;
  background: #F8F8F8;
}
section.gt-block.images .list {
  grid-column-gap: 2rem;
  grid-row-gap: 3rem;
}
section.gt-block.images .list:not(.count1) {
  display: grid;
}
section.gt-block.images .list.count2,
section.gt-block.images .list.count4,
section.gt-block.images .list.count8 {
  grid-template-columns: repeat(2, 1fr);
}
section.gt-block.images .list.count3,
section.gt-block.images .list.count6 {
  grid-template-columns: repeat(3, 1fr);
}
section.gt-block.images .list.count5 {
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "i1 i1 i1 i2 i2 i2" "i3 i3 i4 i4 i5 i5";
}
section.gt-block.images .list.count5 .item1 {
  grid-area: i1;
}
section.gt-block.images .list.count5 .item2 {
  grid-area: i2;
}
section.gt-block.images .list.count5 .item3 {
  grid-area: i3;
}
section.gt-block.images .list.count5 .item4 {
  grid-area: i4;
}
section.gt-block.images .list.count5 .item5 {
  grid-area: i5;
}
section.gt-block.images .list.count7 {
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "i1 i1 i1 i2 i2 i2" "i3 i3 i3 i4 i4 i4" "i5 i5 i6 i6 i7 i7";
}
section.gt-block.images .list.count7 .item1 {
  grid-area: i1;
}
section.gt-block.images .list.count7 .item2 {
  grid-area: i2;
}
section.gt-block.images .list.count7 .item3 {
  grid-area: i3;
}
section.gt-block.images .list.count7 .item4 {
  grid-area: i4;
}
section.gt-block.images .list.count7 .item5 {
  grid-area: i5;
}
section.gt-block.images .list.count7 .item6 {
  grid-area: i6;
}
section.gt-block.images .list.count7 .item7 {
  grid-area: i7;
}
section.gt-block.images .item {
  background: white;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  border-radius: 1.5rem;
}
section.gt-block.images .img {
  padding: 56.25% 0 0 0;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  border-radius: 1.5rem;
}
section.gt-block.images .img img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  border-radius: 1.5rem;
}
section.gt-block.images .img ul {
  padding: 0 0 2rem 0;
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 2rem;
  list-style: none;
  text-align: right;
}
section.gt-block.images .img ul li {
  padding: 0 0 1rem 1rem;
  display: inline-block;
  vertical-align: top;
}
section.gt-block.images.image-format-16x9 .img {
  padding: 56.25% 0 0 0;
}
section.gt-block.images.image-format-4x3 .img {
  padding: 75% 0 0 0;
}
section.gt-block.images .content {
  padding: 1rem 2rem;
  color: #1A2428;
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 400;
}
@media screen and (max-width: 900px) {
  section.gt-block.images .list {
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
  }
  section.gt-block.images .list:not(.count1) {
    display: grid;
  }
  section.gt-block.images .list.count2,
  section.gt-block.images .list.count4,
  section.gt-block.images .list.count8 {
    grid-template-columns: repeat(2, 1fr);
  }
  section.gt-block.images .list.count3 {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "i1 i1" "i2 i3";
  }
  section.gt-block.images .list.count3 .item1 {
    grid-area: i1;
  }
  section.gt-block.images .list.count3 .item2 {
    grid-area: i2;
  }
  section.gt-block.images .list.count3 .item3 {
    grid-area: i3;
  }
  section.gt-block.images .list.count6 {
    grid-template-columns: repeat(2, 1fr);
  }
  section.gt-block.images .list.count5 {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "i1 i1" "i2 i3" "i4 i5";
  }
  section.gt-block.images .list.count7 {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "i1 i1" "i2 i3" "i4 i5" "i6 i7";
  }
}
@media screen and (max-width: 500px) {
  section.gt-block.images {
    padding: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
  section.gt-block.images .list {
    grid-template-areas: none !important;
    grid-template-columns: repeat(1, 1fr) !important;
  }
  section.gt-block.images .item {
    grid-area: unset !important;
  }
}