/* ----------------------------------------------------------
   GENERAL WRAPPER
---------------------------------------------------------- */

.fw-fw-wrapper {
    position: relative;
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ----------------------------------------------------------
   SLIDER (Flickity)
---------------------------------------------------------- */

.fw-fw-slider {
    width: 100%;
    overflow: visible;
}

/* ----------------------------------------------------------
   CELLS (3 images in viewport)
---------------------------------------------------------- */

.fw-fw-cell {
    width: 33.3333%;
    padding: 0 12px;               /* spacing between images */
    box-sizing: border-box;
    overflow: visible;
}

/* images – side images are smaller */
.fw-fw-cell img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(0.7);         /* side images */
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* center image – full scale */
.fw-fw-cell.is-center img {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   ARROWS
---------------------------------------------------------- */

.fw-fw-arrows {
    display: flex;
    justify-content: space-between;
    margin-top: -100px;
    padding: 0 15%;
}

.fw-fw-arrows button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
}

/* SVG sizing */
.fw-fw-arrow svg{
    width: 78px;
    height: 112px;
    display: block;
    fill: #ffffff;
    opacity: .9;
}

/* FORCE flip for prev arrow */
.fw-fw-prev svg{
  transform: rotate(180deg) !important;
  transform-origin: 50% 50% !important;
  display: block;
}


/* no background / border on hover */
.fw-fw-arrows button:hover,
.fw-fw-arrows button:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    opacity: .75;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 1024px) {
    .fw-fw-cell {
        width: 40%;
    }
}

@media (max-width: 767px) {

    .fw-fw-cell {
        width: 70%;
    }

    .fw-fw-arrows {
        padding: 0 10px;
    }
}