::view-transition-group(*) {
          animation-duration: .5s;
          animation-timing-function: var(--ease-5);
      }
      
      .hub>* {
          @media (prefers-reduced-motion: no-preference) {
              &:nth-child(1) {
                  view-transition-name: gallery-item-1;
              }
              &:nth-child(2) {
                  view-transition-name: gallery-item-2;
              }
              &:nth-child(3) {
                  view-transition-name: gallery-item-3;
              }
              &:nth-child(4) {
                  view-transition-name: gallery-item-4;
              }
              &:nth-child(5) {
                  view-transition-name: gallery-item-5;
              }
              &:nth-child(6) {
                  view-transition-name: gallery-item-6;
              }
              &:nth-child(7) {
                  view-transition-name: gallery-item-7;
              }
          }
      }
      
      .hub {
          display: grid;
          gap: 2rem;
          grid-template-columns: repeat(5, 11vw);
          grid-template-rows: repeat(3, 11vw);
          &.portrait {
              grid-template-columns: repeat(3, 23vw);
              grid-template-rows: repeat(5, 23vw);
          }
          > :has(:checked) {
              grid-column: 1 / 4;
              grid-row: 1 / 4;
          }
          >* {
              display: grid;
              >* {
                  grid-area: 1/1;
              }
              >label {
                  opacity: 0;
                  cursor: pointer;
                  -webkit-tap-highlight-color: transparent;
              }
              >input {
                  border-radius: 0;
                  outline-offset: 5px;
                  outline-color: deeppink;
                  outline-color: color(display-p3 1 0 1);
              }
          }
      }
      
      #gallery {
          margin-bottom: 500px
      }
      
      .contentOfGalleryModule {
          border-radius: 17px;
          display: flex;
      }
      
      .divForGalleryModuleContent {
          cursor: pointer;
          transition: transform 0.3s ease;
          padding: 0px;
      }
      
      .divForGalleryModuleContent:hover {
          transform: scale(1.07);
      }
      
      .div2ForGalleryModuleContent {
          align-items: center;
          position: relative;
          display: flex;
          flex-direction: column;
          background-image: linear-gradient(270deg, #45d3ff 0%, #46e5ac 100%);
          padding: 0px;
          border-radius: 20px;
          box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.6);
          overflow: hidden;
      }
      
      .contentOfGalleryModule {
          border-radius: 20px;
          display: flex;
          padding: 0px;
          transition: padding 0.2s ease;
      }
      
      .divForGalleryModuleContent:hover .contentOfGalleryModule {
          padding: 3px;
          border-radius: 21.5px;
      }
      
      .buttonBackgroundDiv {
          background-color: #FFFFFF;
          width: 100%;
          height: 20vw;
          z-index: 99 !important;
          position: absolute;
          top: 28vw;
          border-width: 7px 0px 0px 0px;
          border-style: solid;
          border-color: transparent;
          border-image: linear-gradient(to right, #46e5ac, #45d3ff) 1;
      }
      
      .buttonForGallery {
          position: absolute;
          top: 31.2vw;
          z-index: 100;
          cursor: pointer;
          color: #FFFFFF;
          border-radius: 5px;
          font-size: 18px;
          font-weight: 700;
          background-color: #45b3ff;
          padding-top: 10px;
          padding-right: 20px;
          padding-bottom: 12px;
          padding-left: 25px;
          border-width: 0px;
          display: inline-block;
          box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.5);
          z-index: 100;
          transition: transform 400ms ease, box-shadow 400ms ease, background-color 400ms ease;
          text-decoration: none;
      }
      
      .buttonForGallery:hover {
          transform: translateY(-7px);
          box-shadow: 0px 9px 25px 3px rgba(0, 0, 0, 0.6);
      }
      
      .buttonText123 {
          text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
          color: #FFFFFF;
          font-family: Montserrat, Arial, Sans-Serif;
          font-size: 16px;
          font-weight: 700;
      }
      
      @media (max-width: 866px) {
          .buttonForGallery {
              top: 70vw;
          }
          .buttonText123 {
              font-size: 14px;
              font-weight: 600;
          }
          .div2ForGalleryModuleContent {
              padding: 0px;
              border-radius: 15px;
          }
          .contentOfGalleryModule {
              border-radius: 13px;
          }
          .buttonBackgroundDiv {
              background-color: #FFFFFF;
              width: 100%;
              height: 30vw;
              z-index: 99 !important;
              position: absolute;
              top: 66vw;
              border-width: 6px 0px 0px 0px;
              border-style: solid;
              border-color: transparent;
              border-image: linear-gradient(to right, #45d3ff, #46e5ac) 1;
          }
          .divForGalleryModuleContent:hover .contentOfGalleryModule {
              padding: 2px;
              border-radius: 16.5px;
          }
      }
      
      @layer demo.support {
          * {
              box-sizing: border-box;
              margin: 0;
          }
          html {
              block-size: 100%;
              color-scheme: dark light;
          }
          body {
              min-block-size: 100%;
              font-family: system-ui, sans-serif;
              display: grid;
              place-content: center;
          }
          fieldset {
              border: none;
              padding: 0;
              margin: 0;
          }
          img {
              max-inline-size: 100%;
          }
          html {
              view-transition-name: none;
          }
      }
      /*
    @import "https://unpkg.com/open-props/easings.min.css";
 
   
   @keyframes view-transition {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }
   
   @keyframes portrait-transition {
       from {
           transform: scale(0.8);
       }
       to {
           transform: scale(1);
       }
   }
   
   @keyframes landscape-transition {
       from {
           transform: scale(1.2);
       }
       to {
           transform: scale(1);
       }
   }
   
   .hub>* {
       animation-duration: 0.5s;
       animation-fill-mode: both;
       animation-timing-function: var(--ease-5);
   }
   
   .hub>*:nth-child(1) {
       animation-name: gallery-item-1;
   }
   
   .hub>*:nth-child(2) {
       animation-name: gallery-item-2;
   }
   
   .hub>*:nth-child(3) {
       animation-name: gallery-item-3;
   }
   
   .hub>*:nth-child(4) {
       animation-name: gallery-item-4;
   }
   
   .hub>*:nth-child(5) {
       animation-name: gallery-item-5;
   }
   
   .hub>*:nth-child(6) {
       animation-name: gallery-item-6;
   }
   
   .hub>*:nth-child(7) {
       animation-name: gallery-item-7;
   }
  
   
   .hub {
       display: grid;
       gap: 1rem;
       grid-template-columns: repeat(5, 14vw);
       grid-template-rows: repeat(3, 14vw);
   }
   
   .hub.portrait {
       grid-template-columns: repeat(3, 25vw);
       grid-template-rows: repeat(5, 25vw);
   }
   
   .hub> :has(:checked) {
       grid-column: 1 / 4;
       grid-row: 1 / 4;
   }
   
   .hub>* {
       display: grid;
   }
   
   .hub>*>* {
       grid-area: 1/1;
   }
   
   .hub>*>label {
       opacity: 0;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
   }
   
   .hub>*>input {
       border-radius: 0;
       outline-offset: 5px;
       outline-color: deeppink;
       outline-color: color(display-p3 1 0 1);
   }
   

   #gallery {
    border: 0px;
   }
   
   .contentOfGalleryModule {
       border-radius: 17px;
       display: flex;
       width: 100%

   }
   
   .div2ForGalleryModuleContent {
       align-items: center;
       position: relative;
       display: flex;
       flex-direction: column;
       background-image: linear-gradient(270deg, #45d3ff 0%, #46e5ac 100%);
       padding: 0px;
       border-radius: 20px;
       box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.6);
       overflow: hidden;
   }
  
   .buttonBackgroundDiv {
    background-color: #FFFFFF;
    width: 100%;
    height: 20vw;
    z-index: 99 !important;
    position: absolute;
    top: 33vw;
    border: 4px solid transparent;
    border-image: linear-gradient(to right, #45d3ff, #46e5ac) 1;
   }
   .buttonForGallery {
       position: absolute;
       top: 36.7vw;
       z-index: 100;
       cursor: pointer;
       color: #FFFFFF;
       border-radius: 5px;
       font-size: 18px;
       font-weight: 700;
       background-color: #45b3ff;
       padding: 10px 25px 12px 25px;
       border: none;
       box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.5);
       transition: transform 400ms ease, box-shadow 400ms ease, background-color 400ms ease;
       text-decoration: none;
   }
   
   .buttonForGallery:hover {
       transform: translateY(-7px);
       box-shadow: 0px 9px 25px 3px rgba(0, 0, 0, 0.6);
   }
   
   .buttonText123 {
       text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
       color: #FFFFFF;
       font-family: Montserrat, Arial, Sans-Serif;
       font-size: 16px;
       font-weight: 700;
   }
   
   @media (max-width: 866px) {
       .buttonForGallery {
           top: 53.87vw;
       }
       .buttonText123 {
           font-size: 14px;
           font-weight: 600;
       }
       .div2ForGalleryModuleContent {
           padding: 0px;
           border-radius: 15px;
       }
       .contentOfGalleryModule {
           border-radius: 13px;
       }
       .buttonBackgroundDiv {
        background-color: #FFFFFF;
        width: 100%;
        height: 30vw;
        z-index: 99 !important;
        position: absolute;
        top: 50vw;
       }
   }
   */