/* HERO */
#hero {
    width: 100%;
    overflow: hidden;
    justify-content: flex-end;
    height: 100vh;
}

#hero .background,
#hero .background .desktop,
#hero .background .mobile {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#hero .background .mobile {
    display: none;
}

#hero .background picture,
#hero .background img {
    position: relative;
    width: 100%;
    height: 100%;
}

#hero .background img {
    display: block;
    object-fit: cover;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

#hero.init .background img {
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transition: transform 2s cubic-bezier(0, 0.47, 0, 1);
    transition: transform 2s cubic-bezier(0, 0.47, 0, 1);
}

#hero .hero-content {
    width: 100%;
    color: var(--candy);
    padding: calc(100vw * 37 / var(--page-width))
        calc(100vw * 47 / var(--page-width));
}

#hero .hero-content .scramble-text {
    color: var(--candy);
}

#hero .hero-content .row {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

#hero .hero-content .row span:nth-child(2) {
    left: calc(100vw * 364 / var(--page-width));
}

#hero .hero-content .row .flex-row > *:not(:first-child) {
    margin-left: calc(100vw * 14 / var(--page-width));
}

#hero .hero-content .flex-row {
    text-align: right;
}

#hero .hero-content .hero-logo {
    width: 100%;
    height: auto;
    display: block;
    margin-top: calc(100vw * 19 / var(--page-width));
}

.black-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--black);
    z-index: -1;
}

/* ABOUT */
#about {
    padding-top: calc(100vw * 160 / var(--page-width));
    padding-bottom: calc(100vw * 85 / var(--page-width));
    padding-left: calc(100vw * 97 / var(--page-width));
    padding-right: calc(100vw * 141 / var(--page-width));
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--white);
}

#about .column:first-child {
    width: calc(100vw * 777 / var(--page-width));
}

#about .column:last-child {
    width: calc(100vw * 394 / var(--page-width));
}

#about h2 {
    width: calc(100vw * 567 / var(--page-width));
}

#about h2 > .animated-text:nth-child(2) {
    align-self: flex-end;
}

#about .about-image,
#about .about-image .image {
    width: 100%;
}

#about .about-image .image.mobile {
    display: none;
}

#about .crown {
    top: calc(-100vw * 50 / var(--page-width));
    right: calc(100vw * 58 / var(--page-width));
    width: calc(100vw * 190 / var(--page-width));
}

#about .queens {
    bottom: calc(100vw * 190 / var(--page-width));
    right: calc(100vw * 20 / var(--page-width));
    width: calc(100vw * 165 / var(--page-width));
}

#about .about-text {
    margin-top: calc(100vw * 116 / var(--page-width));
}

#about .about-text .absolute-title {
    top: 0;
    left: calc(-100vw * 20 / var(--page-width));
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    text-align: right;
}

#about .about-text .flex-column {
    margin-top: calc(100vw * 50 / var(--page-width));
    align-items: flex-end;
    width: 100%;
}

#about .about-text .flex-column > * {
    width: calc(100vw * 255 / var(--page-width));
    text-align: right;
}

#about .about-text .flex-column span {
    margin-bottom: calc(100vw * 25 / var(--page-width));
}

/* GAME */
#game {
    padding-top: calc(100vw * 85 / var(--page-width));
    padding-bottom: calc(100vw * 80 / var(--page-width));
    padding-left: calc(100vw * 50 / var(--page-width));
    overflow: hidden;
    background-color: var(--white);
}

#game .column:first-child {
    width: calc(100vw * 704 / var(--page-width));
    padding-top: calc(100vw * 45 / var(--page-width));
}

#game .column:last-child {
    position: relative;
    -webkit-transform: translate3d(calc(-100vw * 40 / var(--page-width)), 0, 0);
    transform: translate3d(calc(-100vw * 40 / var(--page-width)), 0, 0);
}

#game .subcolumn {
    width: calc(100vw * 380 / var(--page-width));
}

#game h2 {
    width: 100%;
}

#game .game-text {
    width: calc(100vw * 324 / var(--page-width));
    margin-top: calc(100vw * 80 / var(--page-width));
}

#game .game-text .absolute-title {
    top: 50%;
    left: calc(-100vw * 20 / var(--page-width));
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    text-align: right;
}

#game .game-text > .font-size-p1:last-child {
    margin-top: calc(100vw * 47 / var(--page-width));
}

#game .sishood {
    width: calc(100vw * 205 / var(--page-width));
    bottom: calc(100vw * 50 / var(--page-width));
    right: calc(100vw * 50 / var(--page-width));
}

#game .game-image {
    width: calc(100vw * 755 / var(--page-width));
}

#game .ball {
    width: calc(100vw * 225 / var(--page-width));
    bottom: 0;
    right: calc(100vw * 40 / var(--page-width));
}

/* METHOD */
#method {
    padding-top: calc(100vw * 95 / var(--page-width));
    padding-bottom: calc(100vw * 260 / var(--page-width));
    padding-right: calc(100vw * 54 / var(--page-width));
    background: var(--black);
    color: var(--white);
    justify-content: flex-end;
}

#method .column:first-child {
    position: relative;
    width: calc(100vw * 812 / var(--page-width));
    left: 0;
    top: calc(100vw * 70 / var(--page-width));
}

#method .column:first-child .stickers {
    width: calc(100vw * 571 / var(--page-width));
    height: calc(100vw * 341 / var(--page-width));
    z-index: 1;
    position: absolute;
    left: calc(100vw * 100 / var(--page-width));
    top: calc(100vw * -180 / var(--page-width));
}

#method .column:first-child .image {
    position: relative;
    width: calc(100vw * 580 / var(--page-width));
    left: calc(100vw * 50 / var(--page-width));
    height: auto;
    display: block;
}

#method .column:first-child .video {
    position: absolute;
    width: calc(100vw * 285 / var(--page-width));
    height: calc(100vw * 456 / var(--page-width));
    top: calc(100vw * 165 / var(--page-width));
    left: calc(100vw * 360 / var(--page-width));
    transform: rotate(3.75deg);
}

#method .column:first-child .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#method .column:first-child .phrase {
    width: 136%;
    left: 0;
    bottom: calc(100vw * -90 / var(--page-width));
}

#method .column:first-child .phrase img {
    object-fit: contain;
}

#method .column:last-child {
    width: calc(100vw * 806 / var(--page-width));
}

#method .column:last-child .row:first-child {
    margin-bottom: calc(100vw * 70 / var(--page-width));
    justify-content: space-between;
}

#method .column:last-child .row:first-child h2 {
    width: calc(100vw * 380 / var(--page-width));
}

#method .column:last-child .row:first-child .font-size-p1 {
    width: calc(100vw * 397 / var(--page-width));
}

#method .column:last-child .row:last-child {
    justify-content: flex-end;
}

#method .column:last-child .row:last-child .inner {
    width: calc(100vw * 490 / var(--page-width));
}

#method .column:last-child .row:last-child .inner .absolute-title {
    top: 0;
    left: calc(-100vw * 20 / var(--page-width));
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    text-align: right;
}

#method .column:last-child .row:last-child .inner .ineew {
    margin-top: calc(100vw * 27 / var(--page-width));
    width: calc(100vw * 113 / var(--page-width));
    height: auto;
    display: block;
}

/* SCOPE */
#scope {
    width: 100%;
    background-color: var(--candy);
    overflow: hidden;
}

#scope:after {
    content: "";
    display: block;
    width: 100%;
    position: relative;
    padding-bottom: 63.26%;
    pointer-events: none;
}

#scope .background {
    width: calc(100vw * 1097 / var(--page-width));
    right: calc(100vw * 41 / var(--page-width));
    top: calc(100vw * 102 / var(--page-width));
}

#scope .background.mobile {
    display: none;
}

#scope .background svg {
    width: 100%;
    height: auto;
    display: block;
}

#scope .scope-content {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: space-between;
}

#scope .column:first-child {
    padding-top: calc(100vw * 155 / var(--page-width));
    padding-left: calc(100vw * 56 / var(--page-width));
    padding-bottom: calc(100vw * 120 / var(--page-width));
    justify-content: space-between;
    width: calc(100vw * 629 / var(--page-width));
}

#scope .column:last-child {
    padding-top: calc(100vw * 84 / var(--page-width));
    align-items: flex-end;
    justify-content: space-between;
}

#scope .scope-text {
    align-self: flex-end;
    width: calc(100vw * 482 / var(--page-width));
}

#scope .scope-text .flex-row {
    justify-content: flex-start;
}

#scope .scope-text .flex-row:not(:last-child) {
    margin-bottom: calc(100vw * 43 / var(--page-width));
}

#scope .scope-text .flex-row span {
    text-align: right;
    width: calc(100vw * 100 / var(--page-width));
    margin-right: calc(100vw * 43 / var(--page-width));
}

#scope .scope-text .flex-row div {
    width: calc(100vw * 270 / var(--page-width));
}

#scope .column .scope-image:first-child {
    width: calc(100vw * 550 / var(--page-width));
    margin-right: calc(100vw * 40 / var(--page-width));
    z-index: 2;
}

#scope .column .scope-image:last-child {
    width: calc(100vw * 506 / var(--page-width));
    margin-right: calc(100vw * 140 / var(--page-width));
    z-index: 1;
}

#scope .video {
    width: calc(100vw * 414 / var(--page-width));
    height: calc(100vw * 268 / var(--page-width));
    top: calc(100vw * -100 / var(--page-width));
    left: calc(100vw * 80 / var(--page-width));
    transform: rotate(-3deg);
    position: relative;
    display: block;
}

#scope .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#scope .video .aspect-container {
    position: absolute;
    width: calc(100vw * 305 / var(--page-width));
    height: calc(100vw * 228 / var(--page-width));
    bottom: calc(100vw * -130 / var(--page-width));
    left: calc(100vw * -70 / var(--page-width));
}

#scope .video .aspect-container img {
    position: absolute;
    top: 0;
    left: 0;
}

#scope .ball {
    bottom: calc(-100vw * 120 / var(--page-width));
    right: calc(-100vw * 40 / var(--page-width));
    width: calc(100vw * 263 / var(--page-width));
}

#scope .hearth {
    top: calc(100vw * 69 / var(--page-width));
    left: calc(-100vw * 25 / var(--page-width));
    width: calc(100vw * 136 / var(--page-width));
}

#scope .mobile {
    display: none;
}

/* DONATIONS */
#donations {
    padding-top: calc(100vw * 106 / var(--page-width));
    padding-left: calc(100vw * 65 / var(--page-width));
    padding-right: calc(100vw * 166 / var(--page-width));
    justify-content: space-between;
    align-items: center;
    background-color: var(--grey);
}

#donations .column:first-child {
    width: calc(100vw * 567 / var(--page-width));
}

#donations .donations-image,
#donations .donations-image .image {
    width: 100%;
}

#donations h2 {
    width: 100%;
    padding-left: calc(100vw * 60 / var(--page-width));
}

#donations .column:last-child {
    text-align: center;
    align-items: center;
    width: calc(100vw * 589 / var(--page-width));
}

#donations .column:last-child h3 {
    margin-bottom: calc(100vw * 22 / var(--page-width));
    font-size: var(--font-size-f1);
    line-height: var(--line-height-f1);
    font-family: "otneue", "Helvetica", sans-serif;
}

#donations .red-button a:before,
#donations .red-button a:after {
    content: "";
    display: block;
    width: calc(100vw * 174 / var(--page-width));
    height: calc(100vw * 58 / var(--page-width));
    background-image: url(../../images/hearts.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    position: absolute;
}

#donations .red-button a:before {
    left: calc(-100vw * 190 / var(--page-width));
}

#donations .red-button a:after {
    right: calc(-100vw * 190 / var(--page-width));
}

.donation-button.disabled {
    border-color: #B9B9B9;
    background-color: transparent !important;
    pointer-events: none;
}

/* DROPS */
#drops {
    padding: calc(100vw * 82 / var(--page-width))
        calc(100vw * 48 / var(--page-width))
        calc(100vw * 150 / var(--page-width));
    background-color: var(--grey);
    justify-content: flex-start;
}

#drops .drops-logo {
    right: calc(100vw * 65 / var(--page-width));
    top: calc(100vw * 5 / var(--page-width));
    width: calc(100vw * 340 / var(--page-width));
    z-index: 2;
}

#drops .drops-logo .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#drops .drops-logo .font-size-p1 {
    width: calc(100vw * 216 / var(--page-width));
    margin-left: calc(100vw * 68 / var(--page-width));
    margin-top: calc(-100vw * 10 / var(--page-width));
}

#drops .drops-logo .font-size-p1 strong {
    color: var(--candy);
    font-weight: initial;
}

.drops-swiper {
    width: calc(100vw * 1031 / var(--page-width));
    z-index: 1;
    margin: 0;
}

.drop-item {
    width: 100%;
}

.drop-item .inner {
    width: 100%;
    color: var(--black);
    border: 1px solid var(--black);
    display: block;
    padding: calc(100vw * 39 / var(--page-width))
        calc(100vw * 33 / var(--page-width));
}

.drop-item .inner:after {
    content: "";
    display: block;
    pointer-events: none;
    width: 100%;
    position: relative;
    padding-bottom: 146%;
}

.drop-item .inner .image {
    width: calc(100% - (100vw * 66 / var(--page-width)));
    height: calc(100% - (100vw * 78 / var(--page-width)));
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: -1;
    -webkit-transition: transform 0.35s ease;
    transition: transform 0.35s ease;
}

.drop-item:hover .inner .image {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.15);
    transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.drop-item .inner .image .inner-image {
    width: 100%;
    height: 100%;
}

.drop-item .inner .image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.drop-item .inner .image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.drop-item .absolute-info {
    width: 100%;
    left: 0;
    justify-content: space-between;
    padding: calc(100vw * 14 / var(--page-width))
        calc(100vw * 13 / var(--page-width));
}

.drop-item .absolute-info.top {
    top: 0;
}

.drop-item .absolute-info.bottom {
    bottom: 0;
}

.drop-item .absolute-info > *:last-child {
    text-align: right;
}

.drop-item .absolute-info .flex-row {
    gap: calc(100vw * 12 / var(--page-width));
}

.drop-item .loading {
    left: 50%;
    bottom: calc(100vw * 75 / var(--page-width));
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    text-align: center;
    position: absolute !important;
}

.drop-item > .flex-column {
    margin-top: calc(100vw * 10 / var(--page-width));
}

/* RESPONSIVE */
@media only screen and (max-width: 768px) {
    /* HERO */
    #hero {
    }

    #hero .background .desktop {
        display: none;
    }

    #hero .background .mobile {
        display: block;
    }

    #hero .hero-content {
        padding: calc(100vw * 27 / var(--page-width));
    }

    #hero .hero-content .hero-logo {
        margin-top: calc(100vw * 10 / var(--page-width));
    }

    #hero .hero-content .flex-row {
        font-size: calc(10rem / 15);
    }

    #hero .hero-content .row .flex-row > *:not(:first-child) {
        margin-left: calc(100vw * 20 / var(--page-width));
    }

    /* ABOUT */
    #about {
        padding-top: calc(100vw * 89 / var(--page-width));
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        flex-direction: column;
        z-index: 2;
    }

    #about .column:first-child,
    #about .column:last-child,
    #about h2 {
        width: 100%;
    }

    #about .column:last-child {
        padding: 0 calc(100vw * 24 / var(--page-width));
    }

    #about h2 {
        padding: 0 calc(100vw * 26 / var(--page-width));
    }

    #about .about-image {
        margin-top: calc(-100vw * 25 / var(--page-width));
    }

    #about .about-image .image.desktop {
        display: none;
    }

    #about .about-image .image.mobile {
        display: block;
    }

    #about .crown {
        top: calc(-100vw * 20 / var(--page-width));
        right: calc(100vw * 67 / var(--page-width));
        width: calc(100vw * 106 / var(--page-width));
    }

    #about .queens {
        bottom: calc(100vw * 105 / var(--page-width));
        right: calc(100vw * 20 / var(--page-width));
        width: calc(100vw * 97 / var(--page-width));
    }

    #about .about-text {
        margin-top: calc(-100vw * 25 / var(--page-width));
    }

    #about .about-text .absolute-title {
        position: relative;
        top: unset;
        left: unset;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        margin-bottom: calc(100vw * 21 / var(--page-width));
        text-align: left;
    }

    #about .about-text .flex-column {
        margin-top: calc(100vw * 40 / var(--page-width));
    }

    #about .about-text .flex-column span {
        margin-bottom: calc(100vw * 18 / var(--page-width));
    }

    /* GAME */
    #game {
        padding-top: calc(100vw * 50 / var(--page-width));
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(100vw * 25 / var(--page-width));
        flex-direction: column-reverse;
    }

    #game .column:first-child,
    #game .column:last-child {
        width: 100%;
    }

    #game .column:first-child {
        flex-direction: column;
        padding: 0 calc(100vw * 24 / var(--page-width));
        margin-top: calc(100vw * 80 / var(--page-width));
    }

    #game .column:last-child {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    #game .subcolumn {
        width: 100%;
    }

    #game .game-text {
        margin-top: calc(100vw * 26 / var(--page-width));
    }

    #game .game-image {
        width: 100%;
    }

    #game .game-image .image .aspect-container {
        padding-bottom: 78% !important;
    }

    #game .ball {
        width: calc(100vw * 140 / var(--page-width));
        bottom: calc(-100vw * 50 / var(--page-width));
        right: calc(100vw * 5 / var(--page-width));
    }

    #game .sishood {
        width: calc(100vw * 102 / var(--page-width));
        bottom: calc(-100vw * 280 / var(--page-width));
        right: calc(100vw * 130 / var(--page-width));
    }

    #game .game-text .absolute-title {
        position: relative;
        top: unset;
        left: unset;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        text-align: left;
        margin: calc(100vw * 36 / var(--page-width)) 0;
    }

    #game .game-text > .font-size-p1:last-child {
        margin-top: 0;
    }

    /* NEWS */
    #news {
        padding-top: calc(100vw * 50 / var(--page-width));
    }

    /* METHOD */
    #method {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(100vw * 25 / var(--page-width));
        flex-direction: column;
        overflow: hidden;
    }

    #method .column:first-child,
    #method .column:last-child {
        width: 100%;
    }

    #method .column:first-child {
        padding: 0;
        top: calc(100vw * 560 / var(--page-width));
        position: absolute;
    }

    #method .column:last-child {
        padding: 0 calc(100vw * 24 / var(--page-width));
    }

    #method .column:last-child .row:first-child {
        flex-direction: column;
        margin-bottom: calc(100vw * 513 / var(--page-width));
    }

    #method .column:first-child .image {
        width: 80%;
        left: calc(100vw * 30 / var(--page-width));
        top: calc(100vw * 116 / var(--page-width));
    }

    #method .column:last-child .row:first-child .font-size-p1 {
        width: 100%;
    }

    #method .column:last-child .row:first-child h2 {
        width: 100%;
        margin-bottom: calc(100vw * 26 / var(--page-width));
    }

    #method .column:last-child .row:last-child .inner .absolute-title {
        position: relative;
        text-align: left;
        top: unset;
        left: unset;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        margin-bottom: calc(100vw * 22 / var(--page-width));
    }

    #method .column:last-child .row:last-child .inner .ineew {
        margin-top: calc(100vw * 22 / var(--page-width));
        width: calc(100vw * 100 / var(--page-width));
    }

    #method .column:first-child .stickers {
        width: calc(100vw * 336 / var(--page-width));
        height: calc(100vw * 201 / var(--page-width));
        z-index: 1;
        position: absolute;
        left: calc(100vw * 20 / var(--page-width));
        top: calc(100vw * 10 / var(--page-width));
    }

    #method .column:first-child .video {
        width: calc(100vw * 168 / var(--page-width));
        height: calc(100vw * 268 / var(--page-width));
        top: calc(100vw * 205 / var(--page-width));
        left: calc(100vw * 198 / var(--page-width));
    }

    #method .column:first-child .phrase {
        width: 124%;
        left: calc(100vw * -5 / var(--page-width));
        top: calc(100vw * 290 / var(--page-width));
        bottom: unset;
    }

    /* SCOPE */
    #scope:after {
        padding-bottom: 196%;
    }

    #scope .background {
        width: 100%;
        right: 0;
    }

    #scope .background.desktop {
        display: none;
    }

    #scope .background.mobile {
        display: block;
        width: 200%;
        left: -15%;
    }

    #scope .scope-content {
        padding-top: calc(100vw * 50 / var(--page-width));
        padding-bottom: calc(100vw * 40 / var(--page-width));
    }

    #scope .column:first-child,
    #scope .column:last-child {
        width: 100%;
    }

    #scope .column:first-child {
        padding: 0 calc(100vw * 24 / var(--page-width));
    }

    #scope .column:last-child {
        position: absolute;
        top: 0;
        right: 0;
        padding-top: calc(100vw * 100 / var(--page-width));
        overflow: hidden;
    }

    #scope .column .scope-image:last-child {
        width: calc(100vw * 200 / var(--page-width));
        margin-top: calc(100vw * 40 / var(--page-width));
        margin-right: calc(100vw * 50 / var(--page-width));
        z-index: 1;
    }

    #scope .column .scope-image:first-child {
        width: calc(100vw * 250 / var(--page-width));
        margin-right: calc(-100vw * 20 / var(--page-width));
    }

    #scope .scope-text {
        width: 100%;
    }

    #scope .scope-text .flex-row:not(:last-child) {
        margin-bottom: calc(100vw * 40 / var(--page-width));
    }

    #scope .scope-text .flex-row {
        font-size: 0.93rem;
    }

    #scope .scope-text .flex-row span {
        text-align: right;
        width: calc(100vw * 102 / var(--page-width));
        margin-right: calc(100vw * 14 / var(--page-width));
    }

    #scope .scope-text .flex-row div {
        width: calc(100vw * 222 / var(--page-width));
    }

    #scope .ball {
        bottom: calc(-100vw * -130 / var(--page-width));
        right: calc(-100vw * 18 / var(--page-width));
        width: calc(100vw * 112 / var(--page-width));
    }

    #scope .hearth {
        top: calc(100vw * -150 / var(--page-width));
        left: calc(-100vw * 5 / var(--page-width));
        width: calc(100vw * 58 / var(--page-width));
    }

    #scope .desktop {
        display: none;
    }

    #scope .mobile {
        display: block;
    }

    /* DONATIONS */
    #donations {
        flex-direction: column;
        padding-top: calc(100vw * 50 / var(--page-width));
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    #donations .column:first-child,
    #donations .column:last-child {
        width: 100%;
    }

    #donations .column:last-child {
        margin-top: calc(100vw * 15 / var(--page-width));
        padding: 0 calc(100vw * 24 / var(--page-width));
    }

    #donations h2 {
        padding: 0 calc(100vw * 24 / var(--page-width));
    }

    #donations .donations-image {
        margin-top: calc(-100vw * 10 / var(--page-width));
        overflow: hidden;
    }

    #donations .donations-image .image {
        -webkit-transform: translate3d(
            calc(100vw * 22 / var(--page-width)),
            0,
            0
        );
        transform: translate3d(calc(100vw * 22 / var(--page-width)), 0, 0);
    }

    #donations .column:last-child h3 {
        margin-bottom: calc(100vw * 22 / var(--page-width));
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
    }

    #donations .red-button a:before,
    #donations .red-button a:after {
        width: calc(100vw * 45 / var(--page-width));
        height: calc(100vw * 45 / var(--page-width));
    }

    #donations .red-button a:before {
        background-image: url(../../images/single-heart.png);
        left: calc(-100vw * 65 / var(--page-width));
        -webkit-transform: translate3d(0, -50%, 0) rotate(-19deg);
        transform: translate3d(0, -50%, 0) rotate(-19deg);
    }

    #donations .red-button a:after {
        background-image: url(../../images/single-heart.png);
        right: calc(-100vw * 65 / var(--page-width));
        -webkit-transform: translate3d(0, -50%, 0) rotate(19deg);
        transform: translate3d(0, -50%, 0) rotate(19deg);
    }

    /* DROPS */
    #drops {
        padding: calc(100vw * 30 / var(--page-width)) 0
            calc(100vw * 45 / var(--page-width));
        flex-direction: column;
    }

    #drops .drops-logo {
        position: relative;
        top: unset;
        right: unset;
        width: 100%;
        align-items: flex-end;
        padding: 0 calc(100vw * 21 / var(--page-width));
    }

    #drops .drops-logo .image {
        width: calc(100vw * 224 / var(--page-width));
    }

    #drops .drops-logo .font-size-p1 {
        margin-left: 0;
        margin-top: 0;
        width: calc(100vw * 142 / var(--page-width));
        position: absolute;
        left: calc(100vw * 24 / var(--page-width));
        bottom: calc(100vw * 27 / var(--page-width));
        font-size: 0.53rem;
    }

    .drops-swiper {
        width: 100%;
        padding: 0 calc(100vw * 24 / var(--page-width));
        margin-top: calc(100vw * 16 / var(--page-width));
    }

    .drop-item .inner .image {
        width: calc(100% - (100vw * 60 / var(--page-width)));
        height: calc(100% - (100vw * 66 / var(--page-width)));
    }

    .drop-item .absolute-info {
        padding: calc(100vw * 12 / var(--page-width))
            calc(100vw * 12 / var(--page-width));
    }

    .drop-item > .flex-column {
        margin-top: calc(100vw * 9 / var(--page-width));
    }
}