/* =========================================================
   SNOW HILLS - COMIC / PROMOTIONAL SECTION
========================================================= */

.comic-section {

   width: 100%;

   background: #ffffff;

   margin: 0;

   padding: 35px 0 0;

   box-sizing: border-box;

   overflow: hidden;
}


/* =========================================================
   COMIC SCALE
========================================================= */

.comic-scale {

   width: 100%;

   display: flex;

   justify-content: center;

   box-sizing: border-box;
}


/* =========================================================
   COMIC WRAPPER
========================================================= */

.comic-wrapper {

   width: 930px;

   margin: 0 auto;

   display: grid;

   grid-template-columns:
      210px 230px 300px;

   column-gap: 28px;

   row-gap: 32px;

   align-items: start;

   box-sizing: border-box;
}


/* =========================================================
   COMIC ITEM
========================================================= */

.comic-item {

   margin: 0;

   padding: 0;

   display: block;

   box-sizing: border-box;

   overflow: visible;
}


/* =========================================================
   ALL COMIC IMAGES
========================================================= */

.comic-item img {

   display: block;

   width: 100%;

   height: auto;

   margin: 0;

   padding: 0;

   object-fit: contain;

   box-sizing: border-box;
}


/* =========================================================
   TOP ROW
========================================================= */


/* ---------------------------------------------------------
   COMIC 1
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(1) {

   grid-column: 1;

   grid-row: 1;

   width: 220px;
}


/* ---------------------------------------------------------
   COMIC 2
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(2) {

   grid-column: 2;

   grid-row: 1;

   width: 225px;
}


/* ---------------------------------------------------------
   COMIC 3
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(3) {

   grid-column: 3;

   grid-row: 1;

   width: 390px;
}


/* =========================================================
   SECOND ROW
========================================================= */


/* ---------------------------------------------------------
   P3 - LEFT
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(4) {

   grid-column: 1;

   grid-row: 2;

   width: 210px;
}


/* ---------------------------------------------------------
   P2 - CENTER
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(5) {

   grid-column: 2;

   grid-row: 2;

   width: 300px;
}


/* ---------------------------------------------------------
   P1 - RIGHT
--------------------------------------------------------- */

.comic-wrapper .comic-item:nth-child(6) {

   grid-column: 3;

   grid-row: 2;

   width: 390px;

}


/* =========================================================
   CERTIFICATION SECTION
========================================================= */

.certification-section {

   width: 100%;

   background: #ffffff;

   margin: 0;

   padding: 45px 20px 25px;

   box-sizing: border-box;

   overflow: hidden;
}


/* =========================================================
   CERTIFICATION CONTAINER
========================================================= */

.certification-container {

   width: 100%;

   max-width: 1050px;

   margin: 0 auto;

   display: grid;

   grid-template-columns:
      1fr 1fr;

   column-gap: 70px;

   align-items: center;

   box-sizing: border-box;
}


/* =========================================================
   CERTIFICATION CONTENT
========================================================= */

.certification-content {

   width: 100%;

   margin: 0;

   padding: 0;

   box-sizing: border-box;
}


/* =========================================================
   CERTIFICATION TITLE
========================================================= */

.certification-title {

   margin: 0 0 28px;

   padding: 0;

   font-family: "Work Sans", sans-serif;

   font-size: 27px;

   font-weight: 700;

   line-height: 1.3;

   color: #211c20;

   display: flex;

   align-items: center;

   gap: 10px;
}


/* =========================================================
   CERTIFICATION ICON
========================================================= */

.certification-icon {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   flex-shrink: 0;

   font-size: 25px;

   line-height: 1;
}


/* =========================================================
   CERTIFICATION TEXT
========================================================= */

.certification-text {

   margin: 0;

   padding: 0;

   max-width: 500px;

   font-family: "Work Sans", sans-serif;

   font-size: 15px;

   font-weight: 400;

   line-height: 1.6;

   color: #292329;

   text-align: left;
}


/* =========================================================
   CERTIFICATION IMAGE
========================================================= */

.certification-image {

   width: 100%;

   margin: 0;

   padding: 0;

   display: flex;

   justify-content: flex-end;

   align-items: center;

   box-sizing: border-box;
}


.certification-image img {

   width: 390px;

   max-width: 100%;

   height: auto;

   display: block;

   object-fit: contain;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

   .comic-wrapper {

      width: 930px;

   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

   .comic-wrapper {

      width: 92%;

      grid-template-columns:
         20% 30% 46%;

      column-gap: 2%;

      row-gap: 28px;
   }


   .comic-wrapper .comic-item:nth-child(1),
   .comic-wrapper .comic-item:nth-child(2),
   .comic-wrapper .comic-item:nth-child(3),
   .comic-wrapper .comic-item:nth-child(4),
   .comic-wrapper .comic-item:nth-child(5),
   .comic-wrapper .comic-item:nth-child(6) {

      width: 100%;
   }


   .certification-container {

      max-width: 92%;

      column-gap: 40px;
   }


   .certification-image img {

      width: 350px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

   .comic-section {

      padding: 25px 15px 0;
   }


   .comic-wrapper {

      width: 100%;

      grid-template-columns:
         1fr 1fr;

      column-gap: 12px;

      row-gap: 18px;
   }


   /* =====================================================
       TOP ROW
    ===================================================== */

   .comic-wrapper .comic-item:nth-child(1) {

      grid-column: 1;

      grid-row: 1;

      width: 100%;
   }


   .comic-wrapper .comic-item:nth-child(2) {

      grid-column: 2;

      grid-row: 1;

      width: 100%;
   }


   .comic-wrapper .comic-item:nth-child(3) {

      grid-column: 1 / -1;

      grid-row: 2;

      width: 100%;
   }


   /* =====================================================
       SECOND ROW
    ===================================================== */

   .comic-wrapper .comic-item:nth-child(4) {

      grid-column: 1;

      grid-row: 3;

      width: 100%;
   }


   .comic-wrapper .comic-item:nth-child(5) {

      grid-column: 2;

      grid-row: 3;

      width: 100%;
   }


   .comic-wrapper .comic-item:nth-child(6) {

      grid-column: 1 / -1;

      grid-row: 4;

      width: 100%;
   }


   /* =====================================================
       CERTIFICATION
    ===================================================== */

   .certification-section {

      padding: 40px 20px 30px;
   }


   .certification-container {

      max-width: 100%;

      grid-template-columns: 1fr;

      row-gap: 35px;

      column-gap: 0;
   }


   .certification-title {

      font-size: 25px;

      margin-bottom: 20px;
   }


   .certification-text {

      max-width: 100%;

      font-size: 15px;

      line-height: 1.6;
   }


   .certification-image {

      justify-content: center;
   }


   .certification-image img {

      width: 100%;

      max-width: 450px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .comic-section {

      padding: 20px 10px 0;
   }


   .comic-wrapper {

      column-gap: 10px;

      row-gap: 15px;
   }


   .certification-section {

      padding: 32px 15px 25px;
   }


   .certification-title {

      font-size: 21px;

      gap: 7px;
   }


   .certification-icon {

      font-size: 22px;
   }


   .certification-text {

      font-size: 14px;
   }

}