.elementor-2983 .elementor-element.elementor-element-a82184e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:550px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2983 .elementor-element.elementor-element-ea48f39 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2983 .elementor-element.elementor-element-3dc39d1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2983 .elementor-element.elementor-element-43bbc0f{--display:grid;--min-height:100vh;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--overflow:hidden;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2983 .elementor-element.elementor-element-7dc3fcb{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-7dc3fcb:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-7dc3fcb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/5.webp");}.elementor-2983 .elementor-element.elementor-element-7dc3fcb.e-con{--align-self:center;}.elementor-2983 .elementor-element.elementor-element-f4802a1{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-f4802a1:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-f4802a1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/2.webp");}.elementor-2983 .elementor-element.elementor-element-d5439fe{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-d5439fe:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-d5439fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/1.webp");}.elementor-2983 .elementor-element.elementor-element-a1d9b37{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-a1d9b37:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-a1d9b37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/3.webp");}.elementor-2983 .elementor-element.elementor-element-cdf0236{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-cdf0236:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-cdf0236 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/4.webp");}.elementor-2983 .elementor-element.elementor-element-d81bfa4{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2983 .elementor-element.elementor-element-d81bfa4:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-d81bfa4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://junika-design.com/wp-content/uploads/2025/01/kissthefrog-plakat-crazy_2-Large.jpeg");}.elementor-2983 .elementor-element.elementor-element-ffe7ab2{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--z-index:1;}.elementor-2983 .elementor-element.elementor-element-ffe7ab2:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-ffe7ab2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-1872677 );}.elementor-2983 .elementor-element.elementor-element-42730c5.elementor-element{--align-self:center;}.elementor-2983 .elementor-element.elementor-element-42730c5{--width:500px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );font-style:var( --e-global-typography-text-font-style );--text-color:var( --e-global-color-fc69cbd );--transition:0.3s;}.elementor-2983 .elementor-element.elementor-element-37e3ff1{width:var( --container-widget-width, 25% );max-width:25%;--container-widget-width:25%;--container-widget-flex-grow:0;color:var( --e-global-color-f20dad9 );}.elementor-2983 .elementor-element.elementor-element-a81ae9b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2983 .elementor-element.elementor-element-cfa3856{--divider-border-style:double;--divider-color:var( --e-global-color-accent );--divider-border-width:0px;width:var( --container-widget-width, 17% );max-width:17%;--container-widget-width:17%;--container-widget-flex-grow:0;}.elementor-2983 .elementor-element.elementor-element-cfa3856 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2983 .elementor-element.elementor-element-cfa3856.elementor-element{--align-self:center;}.elementor-2983 .elementor-element.elementor-element-cfa3856 .elementor-divider-separator{width:0%;margin:0 auto;margin-center:0;}.elementor-2983 .elementor-element.elementor-element-cfa3856 .elementor-divider{text-align:center;padding-block-start:0px;padding-block-end:0px;}.elementor-2983 .elementor-element.elementor-element-8bf28e9{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:50px 20px;--row-gap:50px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-2983 .elementor-element.elementor-element-eff6bff{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2983 .elementor-element.elementor-element-9f0c7bb{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:-450px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2983 .elementor-element.elementor-element-d5832cc{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:-99px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2983 .elementor-element.elementor-element-ae0e4d1{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:-450px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2983 .elementor-element.elementor-element-9b01172{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--z-index:1;}.elementor-2983 .elementor-element.elementor-element-9b01172:not(.elementor-motion-effects-element-type-background), .elementor-2983 .elementor-element.elementor-element-9b01172 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-1872677 );}.elementor-2983 .elementor-element.elementor-element-fdde95f.elementor-element{--align-self:center;}.elementor-2983 .elementor-element.elementor-element-fdde95f{--width:500px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );font-style:var( --e-global-typography-text-font-style );--text-color:var( --e-global-color-fc69cbd );--transition:0.3s;}.elementor-2983 .elementor-element.elementor-element-f2d0652{width:var( --container-widget-width, 25% );max-width:25%;--container-widget-width:25%;--container-widget-flex-grow:0;color:var( --e-global-color-f20dad9 );}.elementor-2983 .elementor-element.elementor-element-6b6ea6c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2983 .elementor-element.elementor-element-12b96a6{--divider-border-style:double;--divider-color:var( --e-global-color-accent );--divider-border-width:0px;width:var( --container-widget-width, 17% );max-width:17%;--container-widget-width:17%;--container-widget-flex-grow:0;}.elementor-2983 .elementor-element.elementor-element-12b96a6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2983 .elementor-element.elementor-element-12b96a6.elementor-element{--align-self:center;}.elementor-2983 .elementor-element.elementor-element-12b96a6 .elementor-divider-separator{width:0%;margin:0 auto;margin-center:0;}.elementor-2983 .elementor-element.elementor-element-12b96a6 .elementor-divider{text-align:center;padding-block-start:0px;padding-block-end:0px;}@media(min-width:853px){.elementor-2983 .elementor-element.elementor-element-8bf28e9{--content-width:922px;}.elementor-2983 .elementor-element.elementor-element-eff6bff{--width:35%;}.elementor-2983 .elementor-element.elementor-element-9f0c7bb{--width:35%;}.elementor-2983 .elementor-element.elementor-element-d5832cc{--width:35%;}.elementor-2983 .elementor-element.elementor-element-ae0e4d1{--width:35%;}}@media(max-width:1024px){.elementor-2983 .elementor-element.elementor-element-43bbc0f{--grid-auto-flow:row;}.elementor-2983 .elementor-element.elementor-element-42730c5{--width:500px;font-size:var( --e-global-typography-text-font-size );}.elementor-2983 .elementor-element.elementor-element-fdde95f{--width:500px;font-size:var( --e-global-typography-text-font-size );}}@media(max-width:852px){.elementor-2983 .elementor-element.elementor-element-43bbc0f{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-2983 .elementor-element.elementor-element-42730c5{--width:500px;font-size:var( --e-global-typography-text-font-size );}.elementor-2983 .elementor-element.elementor-element-fdde95f{--width:500px;font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for html, class: .elementor-element-58e846d */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip Animation</title>
  <style>
    .container {
      display: flex;
      gap: 10px;
    }

    .grid {
      flex-wrap: wrap;
    }

    .columns {
      flex-direction: column;
    }

    .rows {
      flex-direction: row;
    }

    section {
      background-color: #f0f0f0;
      padding: 20px;
      border: 1px solid #ccc;
      flex: 1 1 calc(33.333% - 20px); /* For Grid layout */
    }
  </style>
</head>
<body>
  <div>
    <button id="grid">Grid</button>
    <button id="columns">Columns</button>
    <button id="rows">Rows</button>
  </div>
  
  <div class="container rows">
    <section>Item 1</section>
    <section>Item 2</section>
    <section>Item 3</section>
  </div>

  <script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Flip.min.js"></script>
  <script>
    gsap.registerPlugin(Flip);

    document.querySelector("#grid").addEventListener("click", function (event) {
      event.preventDefault();
      const state = Flip.getState(".container, section");
      const container = document.querySelector(".container");

      container.classList.remove("rows", "columns");
      container.classList.add("grid");

      Flip.from(state, {
        duration: 0.5,
        stagger: 0.1,
        ease: "power1.inOut",
      });
    });

    document.querySelector("#columns").addEventListener("click", function (event) {
      event.preventDefault();
      const state = Flip.getState(".container, section");
      const container = document.querySelector(".container");

      container.classList.remove("rows", "grid");
      container.classList.add("columns");

      Flip.from(state, {
        duration: 0.5,
        stagger: 0.1,
        ease: "power1.inOut",
      });
    });

    document.querySelector("#rows").addEventListener("click", function (event) {
      event.preventDefault();
      const state = Flip.getState(".container, section");
      const container = document.querySelector(".container");

      container.classList.remove("grid", "columns");
      container.classList.add("rows");

      Flip.from(state, {
        duration: 0.5,
        stagger: 0.1,
        ease: "power1.inOut",
      });
    });
  </script>
</body>
</html>/* End custom CSS */