﻿/* common border radius */
/* disable text selection */
section.gt-block.recipe-content {
  overflow: hidden;
  -webkit-border-radius: 4rem;
  -moz-border-radius: 4rem;
  border-radius: 4rem;
  background: #F8F8F8;
}
section.gt-block.recipe-content .content {
  padding: 5rem;
}
section.gt-block.recipe-content .step {
  padding-left: 3.6rem;
  position: relative;
}
section.gt-block.recipe-content .step.step-level-3 {
  padding-left: 4.6rem;
}
section.gt-block.recipe-content .step.step-level-4,
section.gt-block.recipe-content .step.step-level-5,
section.gt-block.recipe-content .step.step-level-6 {
  padding-left: 5.6rem;
}
section.gt-block.recipe-content .step.no-mark {
  padding-left: 0;
}
section.gt-block.recipe-content .step .mark {
  position: absolute;
  left: 0rem;
  top: 0;
}
section.gt-block.recipe-content .step .mark.dot {
  font-size: 2.8rem;
}
section.gt-block.recipe-content .step h3,
section.gt-block.recipe-content .step h4,
section.gt-block.recipe-content .step h5,
section.gt-block.recipe-content .step h6,
section.gt-block.recipe-content .step h7,
section.gt-block.recipe-content .step h8 {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
}
section.gt-block.recipe-content .step h3.mark,
section.gt-block.recipe-content .step h4.mark,
section.gt-block.recipe-content .step h5.mark,
section.gt-block.recipe-content .step h6.mark,
section.gt-block.recipe-content .step h7.mark,
section.gt-block.recipe-content .step h8.mark {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
}
section.gt-block.recipe-content .step h3 .mark,
section.gt-block.recipe-content .step h4 .mark,
section.gt-block.recipe-content .step h5 .mark,
section.gt-block.recipe-content .step h6 .mark,
section.gt-block.recipe-content .step h7 .mark,
section.gt-block.recipe-content .step h8 .mark {
  font-weight: 700;
}
section.gt-block.recipe-content .step .images {
  margin: 0 0 2rem 0;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
}
section.gt-block.recipe-content .step .images a {
  display: block;
  overflow: hidden;
  background: #fff;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  border-radius: 1.5rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section.gt-block.recipe-content .step .images a:hover {
  -webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
}
section.gt-block.recipe-content .step .images a:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
section.gt-block.recipe-content .step .images a em {
  padding: 56.25% 0 0 0;
  position: relative;
  display: block;
  overflow: hidden;
}
section.gt-block.recipe-content .step .images a img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  object-fit: cover;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section.gt-block.recipe-content .step .images a span {
  padding: 1rem 3rem;
  display: block;
  color: #1A2428;
  font-size: 1.5rem;
  line-height: 1.9rem;
  font-weight: 400;
}
section.gt-block.recipe-content .step .images.c1 {
  grid-template-columns: repeat(1, 1fr);
}
section.gt-block.recipe-content .step .images.c2 {
  grid-template-columns: repeat(2, 1fr);
}
section.gt-block.recipe-content .step .images.c3 {
  grid-template-columns: calc((100% - 3rem) / 2) calc((100% - 3rem) / 2);
  grid-template-rows: auto;
  grid-template-areas: "a a" "b c";
}
section.gt-block.recipe-content .step .images.c3 a:nth-of-type(1) {
  grid-area: a;
}
section.gt-block.recipe-content .step .images.c3 a:nth-of-type(2) {
  grid-area: b;
}
section.gt-block.recipe-content .step .images.c3 a:nth-of-type(3) {
  grid-area: c;
}
section.gt-block.recipe-content .step .images.c4 {
  grid-template-columns: repeat(2, 1fr);
}
section.gt-block.recipe-content .step .images.c5 {
  grid-template-columns: calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6);
  grid-template-rows: auto;
  grid-template-areas: "a a a b b b" "c c d d e e";
}
section.gt-block.recipe-content .step .images.c5 a:nth-of-type(1) {
  grid-area: a;
}
section.gt-block.recipe-content .step .images.c5 a:nth-of-type(2) {
  grid-area: b;
}
section.gt-block.recipe-content .step .images.c5 a:nth-of-type(3) {
  grid-area: c;
}
section.gt-block.recipe-content .step .images.c5 a:nth-of-type(4) {
  grid-area: d;
}
section.gt-block.recipe-content .step .images.c5 a:nth-of-type(5) {
  grid-area: e;
}
section.gt-block.recipe-content .step .images.c6 {
  grid-template-columns: repeat(3, 1fr);
}
section.gt-block.recipe-content .step .images.c7 {
  grid-template-columns: calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6) calc((100% - 15rem) / 6);
  grid-template-rows: auto;
  grid-template-areas: "a a a a a a" "b b c c d d" "e e f f g g";
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(1) {
  grid-area: a;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(2) {
  grid-area: b;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(3) {
  grid-area: c;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(4) {
  grid-area: d;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(5) {
  grid-area: e;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(6) {
  grid-area: f;
}
section.gt-block.recipe-content .step .images.c7 a:nth-of-type(7) {
  grid-area: g;
}
section.gt-block.recipe-content .step .images.c8 {
  grid-template-columns: repeat(2, 1fr);
}
section.gt-block.recipe-content .step .images.c9 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 750px) {
  section.gt-block.recipe-content .step .images {
    grid-gap: 2rem;
    grid-template-areas: none !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section.gt-block.recipe-content .step .images a {
    grid-area: auto !important;
  }
}
@media screen and (max-width: 500px) {
  section.gt-block.recipe-content {
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
  section.gt-block.recipe-content .content {
    padding: 20px;
  }
  section.gt-block.recipe-content .step {
    padding-left: 0;
    padding-top: 4rem;
  }
  section.gt-block.recipe-content .step.step-level-4,
  section.gt-block.recipe-content .step.step-level-5,
  section.gt-block.recipe-content .step.step-level-6 {
    padding-left: 0;
  }
  section.gt-block.recipe-content .step .images {
    grid-gap: 2rem;
    grid-template-areas: none !important;
    grid-template-columns: repeat(1, 1fr) !important;
  }
  section.gt-block.recipe-content .step .images a {
    grid-area: auto !important;
  }
}