/* block container widths */
:root {
    --container-pic-wall-sm: 760px;
    --container-pic-wall-md: 880px;
    --container-pic-wall-lg: 1600px;
    --timer-progress-width: 3px;
}

@media only screen and (min-width: 600px) {
    .pic-wall__container {
        max-width: var(--container-pic-wall-sm);
    }
}

@media only screen and (min-width: 900px) {
    .pic-wall__container {
        max-width: 100%;
    }
}

@media only screen and (min-width: 1024px) {
    .pic-wall__container {
        max-width: var(--container-pic-wall-md);
    }
}

@media only screen and (min-width: 1200px) {
    .pic-wall__container {
        max-width: var(--container-pic-wall-lg);
    }
}

.pic-wall {
    position: relative;
}

.pic-wall__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;
}

/* Txt box */
.pic-wall__text-box {
    position: absolute;
    overflow: hidden;
}

    .pic-wall__text-box::before {
        content: " ";
        position: absolute;
        background-color: var(--quote-box-colour);
        top: .125rem;
        left: .125rem;
        height: calc(100% - 4px);
        width: calc(100% - 4px);
    }

.pic-wall__control-buttons {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 2;
}

    .pic-wall__control-buttons button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        cursor: pointer;
        border: none;
        background: transparent;
    }

    .pic-wall__control-buttons.playing .play {
        display: none;
    }

    .pic-wall__control-buttons.playing .pause {
        display: flex;
    }

    .pic-wall__control-buttons .play {
        display: flex;
    }

    .pic-wall__control-buttons .pause {
        display: none;
    }

    .pic-wall__control-buttons img {
        height: 100%;
    }

.pic-wall__text-box-instance {
    position: absolute;
    top: .125rem;
    left: .125rem;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out .5s .2s;
    padding: .625rem;
}

    .pic-wall__text-box-instance.active {
        pointer-events: all;
        transition: opacity ease-in-out .5s .2s;
    }

    .pic-wall__text-box-instance.active {
        opacity: 1;
        pointer-events: all;
        transition: opacity ease-in-out .5s .2s;
    }

.pic-wall__text-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pic-wall__text-box-message {
    font-size: .8125rem;
    line-height: 1.125rem;
    font-style: italic;
    color: var(--quote-colour);
    margin: 0;
}

.pic-wall__text-box-hashtags {
    display: flex;
    flex-wrap: wrap;
}

    .pic-wall__text-box-hashtags a {
        text-decoration: none;
        font-size: .8125rem;
        line-height: 1.125rem;
        letter-spacing: calc(16px * .02);
        color: var(--hashtag-colour);
        margin-right: 1rem;
    }

.pic-wall__text-box-content-bottom {
    display: flex;
    align-items: flex-end;
}

.pic-wall__text-box-name {
    font-size: .75rem;
    color: var(--quote-colour);
    margin: 0 .5rem 0 0;
}

    .pic-wall__text-box-name span {
        font-weight: bold;
    }

.pic-wall__text-box-read-more {
    font-size: .75rem;
    text-decoration: none;
    color: var(--link-colour);
    white-space: nowrap;
}

.pic-wall__text-box-image {
    display: none;
}
/* End of txt box */

/* Pics */
.pic-wall__picture {
    position: absolute;
    z-index: 0;
    background: #f2f2f2;
}

    .pic-wall__picture.active {
        z-index: 2 !important;
    }

    .pic-wall__picture:hover {
        cursor: pointer;
    }


    .pic-wall__picture img {
        position: absolute;
        top: .125rem;
        right: .125rem;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        object-fit: cover;
    }

.pic-wall__pic-container {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

/* Timer */
:root {
    --timer-progress-width: 3px;
}

.pic-wall__timer {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    z-index: 1;
    opacity: 0;
    box-shadow: 0.25rem.25rem .5rem rgba(0, 0, 0, 0.25);
    transition: opacity .35s ease-in-out;
}

    .pic-wall__timer.paused .pic-wall__timer-progress-container .pic-wall__timer-progress {
        animation-play-state: paused !important;
    }

.pic-wall__picture.active .pic-wall__timer {
    opacity: 1;
    transition: opacity .35s ease-in-out;
}

.pic-wall__timer-progress-container {
    position: absolute;
    background-color: var(--link-colour);
}

    .pic-wall__timer-progress-container:nth-child(1) {
        top: 0;
        left: var(--timer-progress-width);
        width: calc(100% - var(--timer-progress-width));
        height: var(--timer-progress-width);
    }

    .pic-wall__timer-progress-container:nth-child(2) {
        top: var(--timer-progress-width);
        right: 0;
        width: var(--timer-progress-width);
        height: calc(100% - var(--timer-progress-width));
    }

    .pic-wall__timer-progress-container:nth-child(3) {
        bottom: 0;
        right: var(--timer-progress-width);
        width: calc(100% - var(--timer-progress-width));
        height: var(--timer-progress-width);
    }

    .pic-wall__timer-progress-container:nth-child(4) {
        bottom: var(--timer-progress-width);
        left: 0;
        width: var(--timer-progress-width);
        height: calc(100% - var(--timer-progress-width));
    }

.pic-wall__timer-progress {
    position: absolute;
    background-color: var(--border-colour);
    width: 0;
    height: 0;
}

.pic-wall__picture.active .pic-wall__timer-progress-container:nth-child(1) .pic-wall__timer-progress {
    top: 0;
    left: 0;
    height: var(--timer-progress-width);
    animation: progress-hor calc(var(--timer-speed) / 4) linear 0s 1 forwards;
}

.pic-wall__picture.active .pic-wall__timer-progress-container:nth-child(2) .pic-wall__timer-progress {
    top: 0;
    right: 0;
    width: var(--timer-progress-width);
    animation: progress-ver calc(var(--timer-speed) / 4) linear calc(var(--timer-speed) / 4) 1 forwards;
}

.pic-wall__picture.active .pic-wall__timer-progress-container:nth-child(3) .pic-wall__timer-progress {
    bottom: 0;
    right: 0;
    height: var(--timer-progress-width);
    animation: progress-hor calc(var(--timer-speed) / 4) linear calc(var(--timer-speed) / 4 * 2) 1 forwards;
}

.pic-wall__picture.active .pic-wall__timer-progress-container:nth-child(4) .pic-wall__timer-progress {
    bottom: 0;
    left: 0;
    width: var(--timer-progress-width);
    animation: progress-ver calc(var(--timer-speed) / 4) linear calc(var(--timer-speed) / 4 * 3) 1 forwards;
}

@keyframes progress-hor {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes progress-ver {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

/* End of timer */
/* End of Pics */
/* Change animation */

.pic-wall__fade-old {
    z-index: 1 !important;
}

.pic-wall__fade-new {
    animation: fade-new-pic 1.5s ease-out 0s 1 forwards;
}

/*.pic-wall__fade-new {
  z-index: 1;
}*/

@keyframes fade-new-pic {
    0% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        z-index: 1;
        opacity: 1;
    }
}

/* End of Change animation */

/*==== TEMPLATES ====*/

@media only screen and (orientation: portrait) and (max-aspect-ratio: 4/7), (orientation: portrait) {
    /*.pic-wall__container {
      background: red;
  }/*  debug */

    .pic-wall {
        padding-top: calc(100% / 4 * 6);
    }

    .pic-wall__text-box {
        top: calc(100% / 6);
        left: calc(100% / 4);
        width: calc(100% / 4 * 2);
        height: calc(100% / 6 * 4);
    }

    .pic-wall__picture {
        width: calc(100%/4);
    }

        .pic-wall__picture:nth-child(16n+2) {
            top: 0;
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+3) {
            top: 0;
            left: calc(100% / 4);
        }

        .pic-wall__picture:nth-child(16n+4) {
            top: 0;
            left: calc(100% / 4 * 2);
        }

        .pic-wall__picture:nth-child(16n+5) {
            top: 0%;
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+6) {
            top: calc(100% / 6);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+7) {
            top: calc(100% / 6 * 2);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+8) {
            top: calc(100% / 6 * 3);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+9) {
            top: calc(100% / 6 * 4);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+10) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(16n+11) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 4 * 2);
        }

        .pic-wall__picture:nth-child(16n+12) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 4);
        }

        .pic-wall__picture:nth-child(16n+13) {
            top: calc(100% / 6 * 5);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+14) {
            top: calc(100% / 6 * 4);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+15) {
            top: calc(100% / 6 * 3);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+16) {
            top: calc(100% / 6 * 2);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+17) {
            top: calc(100% / 6 * 1);
            left: 0;
        }

        .pic-wall__picture:nth-child(n+2):nth-child(-n+17) {
            z-index: 1;
        }

    .pic-wall__control-buttons {
        top: .625rem;
        right: .625rem;
    }

        .pic-wall__control-buttons button {
            padding: .25rem;
        }
}

@media only screen and (orientation: portrait) and (max-aspect-ratio: 3/4) and (min-aspect-ratio: 4/7) {
    /*.pic-wall__container {
      background: yellowgreen;
  }/* debug */

    :root {
        --timer-progress-width: 6px;
    }

    .pic-wall {
        padding-top: calc(100% / 5 * 6);
    }

    .pic-wall__text-box {
        top: calc(100% / 6);
        left: calc(100% / 5);
        width: calc(100% / 5 * 3);
        height: calc(100% / 6 * 4);
    }

    .pic-wall__picture {
        width: calc(100% / 5);
    }

        .pic-wall__picture:nth-child(16n+2) {
            top: 0;
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+3) {
            top: 0;
            left: calc(100% / 5);
        }

        .pic-wall__picture:nth-child(16n+4) {
            top: 0;
            left: calc(100% / 5 * 2);
        }

        .pic-wall__picture:nth-child(16n+5) {
            top: 0%;
            left: calc(100% / 5 * 3);
        }

        .pic-wall__picture:nth-child(16n+6) {
            top: 0;
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+7) {
            top: calc(100% / 6);
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+8) {
            top: calc(100% / 6 * 2);
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+9) {
            top: calc(100% / 6 * 3);
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+10) {
            top: calc(100% / 6 * 4);
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+11) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 5 * 4);
        }

        .pic-wall__picture:nth-child(16n+12) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 5 * 3);
        }

        .pic-wall__picture:nth-child(16n+13) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 5 * 2);
        }

        .pic-wall__picture:nth-child(16n+14) {
            top: calc(100% / 6 * 5);
            left: calc(100% / 5);
        }

        .pic-wall__picture:nth-child(16n+15) {
            top: calc(100% / 6 * 5);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+16) {
            top: calc(100% / 6 * 4);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+17) {
            top: calc(100% / 6 * 3);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+18) {
            top: calc(100% / 6 * 2);
            left: 0;
        }

        .pic-wall__picture:nth-child(16n+19) {
            top: calc(100% / 6 * 1);
            left: 0;
        }

        .pic-wall__picture:nth-child(n+2):nth-child(-n+19) {
            z-index: 1;
        }

    .pic-wall__text-box-instance {
        padding: 8rem 3.5rem;
    }

    .pic-wall__control-buttons {
        top: 4rem;
        right: 3rem;
    }

        .pic-wall__control-buttons button {
            padding: 0;
        }

    .pic-wall__text-box-hashtags {
        flex-direction: row;
        margin-bottom: 1rem;
    }

        .pic-wall__text-box-hashtags a {
            font-size: 1rem;
        }

    .pic-wall__text-box-message {
        font-size: 1.125rem;
        line-height: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .pic-wall__text-box-content-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .pic-wall__text-box-name {
        font-size: 1.125rem;
        line-height: 1.375rem;
        margin-bottom: 1.375rem;
    }

        .pic-wall__text-box-name span {
            display: inline-block;
            width: 100%;
        }

    .pic-wall__text-box-read-more {
        font-size: 0.875rem;
    }
}

@media only screen and (orientation: portrait) and (max-aspect-ratio: 4/8) {
    /*.pic-wall__container {
      background: cyan;
  } /*debug */

    .pic-wall {
        padding-top: calc(100% / 4 * 7);
    }

    .pic-wall__text-box {
        top: calc(100% / 7);
        left: calc(100% / 4);
        width: calc(100% / 4 * 2);
        height: calc(100% / 7 * 5);
    }

    .pic-wall__picture {
        width: calc(100%/4);
    }

        .pic-wall__picture:nth-child(18n+2) {
            top: 0;
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+3) {
            top: 0;
            left: calc(100% / 4);
        }

        .pic-wall__picture:nth-child(18n+4) {
            top: 0;
            left: calc(100% / 4 * 2);
        }

        .pic-wall__picture:nth-child(18n+5) {
            top: 0%;
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+6) {
            top: calc(100% / 7);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+7) {
            top: calc(100% / 7 * 2);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+8) {
            top: calc(100% / 7 * 3);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+9) {
            top: calc(100% / 7 * 4);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+10) {
            top: calc(100% / 7 * 5);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+11) {
            top: calc(100% / 7 * 6);
            left: calc(100% / 4 * 3);
        }

        .pic-wall__picture:nth-child(18n+12) {
            top: calc(100% / 7 * 6);
            left: calc(100% / 4 * 2);
        }

        .pic-wall__picture:nth-child(18n+13) {
            top: calc(100% / 7 * 6);
            left: calc(100% / 4);
        }

        .pic-wall__picture:nth-child(18n+14) {
            top: calc(100% / 7 * 6);
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+15) {
            top: calc(100% / 7 * 5);
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+16) {
            top: calc(100% / 7 * 4);
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+17) {
            top: calc(100% / 7 * 3);
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+18) {
            top: calc(100% / 7 * 2);
            left: 0;
        }

        .pic-wall__picture:nth-child(18n+19) {
            top: calc(100% / 7);
            left: 0;
        }

        .pic-wall__picture:nth-child(n+2):nth-child(-n+19) {
            z-index: 1;
        }

    .pic-wall__control-buttons {
        top: 1rem;
        right: .875rem;
    }

        .pic-wall__control-buttons button {
            padding: .25rem;
        }

    .pic-wall__text-box-instance {
        padding: 2rem .875rem;
    }

    .pic-wall__text-box-hashtags {
        flex-direction: column;
    }

        .pic-wall__text-box-hashtags a {
            font-size: 1rem;
        }

    .pic-wall__text-box-message {
        font-size: .875rem;
    }

    .pic-wall__text-box-content-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .pic-wall__text-box-name {
        font-size: .875rem;
        line-height: 1rem;
        margin-bottom: 0.875rem;
    }

        .pic-wall__text-box-name span {
            display: inline-block;
            width: 100%;
        }

    .pic-wall__text-box-read-more {
        font-size: 0.875rem;
    }
}

@media only screen and (orientation: landscape) and (max-aspect-ratio: 16/9), (orientation: landscape) {
    /*.pic-wall__container {
      background: blue;
  } /*debug */

    :root {
        --timer-progress-width: 6px;
    }

    .pic-wall {
        padding-top: calc(100% / 9 * 4);
    }

    .pic-wall__text-box {
        top: calc(100% / 4);
        left: calc(100% / 9 * 2);
        width: calc(100% / 9 * 5);
        height: calc(100% / 4 * 2);
    }

    .pic-wall__picture {
        width: calc(100% / 9);
    }

        .pic-wall__picture:nth-child(26n+2) {
            top: 0;
            left: 0;
        }

        .pic-wall__picture:nth-child(26n+3) {
            top: 0;
            left: calc(100% / 9);
        }

        .pic-wall__picture:nth-child(26n+4) {
            top: 0;
            left: calc(100% / 9 * 2);
        }

        .pic-wall__picture:nth-child(26n+5) {
            top: 0%;
            left: calc(100% / 9 * 3);
        }

        .pic-wall__picture:nth-child(26n+6) {
            top: 0;
            left: calc(100% / 9 * 4);
        }

        .pic-wall__picture:nth-child(26n+7) {
            top: 0;
            left: calc(100% / 9 * 5);
        }

        .pic-wall__picture:nth-child(26n+8) {
            top: 0;
            left: calc(100% / 9 * 6);
        }

        .pic-wall__picture:nth-child(26n+9) {
            top: 0;
            left: calc(100% / 9 * 7);
        }

        .pic-wall__picture:nth-child(26n+10) {
            top: 0;
            left: calc(100% / 9 * 8);
        }

        .pic-wall__picture:nth-child(26n+11) {
            top: calc(100% / 4);
            left: calc(100% / 9 * 8);
        }

        .pic-wall__picture:nth-child(26n+12) {
            top: calc(100% / 4);
            left: calc(100% / 9 * 7);
        }

        .pic-wall__picture:nth-child(26n+13) {
            top: calc(100% / 4 * 2);
            left: calc(100% / 9 * 7);
        }

        .pic-wall__picture:nth-child(26n+14) {
            top: calc(100% / 4 * 2);
            left: calc(100% / 9 * 8);
        }

        .pic-wall__picture:nth-child(26n+15) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 8);
        }

        .pic-wall__picture:nth-child(26n+16) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 7);
        }

        .pic-wall__picture:nth-child(26n+17) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 6);
        }

        .pic-wall__picture:nth-child(26n+18) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 5);
        }

        .pic-wall__picture:nth-child(26n+19) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 4);
        }

        .pic-wall__picture:nth-child(26n+20) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 3);
        }

        .pic-wall__picture:nth-child(26n+21) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9 * 2);
        }

        .pic-wall__picture:nth-child(26n+22) {
            top: calc(100% / 4 * 3);
            left: calc(100% / 9);
        }

        .pic-wall__picture:nth-child(26n+23) {
            top: calc(100% / 4 * 3);
            left: 0;
        }

        .pic-wall__picture:nth-child(26n+24) {
            top: calc(100% / 4 * 2);
            left: 0;
        }

        .pic-wall__picture:nth-child(26n+25) {
            top: calc(100% / 4 *2);
            left: calc(100% / 9);
        }

        .pic-wall__picture:nth-child(26n+26) {
            top: calc(100% / 4);
            left: calc(100% / 9);
        }

        .pic-wall__picture:nth-child(26n+27) {
            top: calc(100% / 4);
            left: 0;
        }

        .pic-wall__picture:nth-child(n+2):nth-child(-n+27) {
            z-index: 1;
        }

    .pic-wall__control-buttons {
        top: 1.65rem;
        right: calc(32% + 32px);
    }

        .pic-wall__control-buttons button {
            padding: 0;
        }

    .pic-wall__text-box-instance {
        padding: 1.65rem 2rem 2.35rem;
        display: flex;
    }

    .pic-wall__text-box-hashtags {
        flex-direction: row;
        margin-bottom: .875rem;
    }

        .pic-wall__text-box-hashtags a {
            font-size: 1rem;
        }

    .pic-wall__text-box-message {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 2rem;
    }

    .pic-wall__text-box-content-bottom {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }

    .pic-wall__text-box-name {
        font-size: 1rem;
        line-height: 1.375rem;
        margin-bottom: 0;
    }

        .pic-wall__text-box-name span {
            display: inline-block;
            width: 100%;
        }

    .pic-wall__text-box-read-more {
        font-size: 0.875rem;
    }

    .pic-wall__text-box-image {
        display: block;
        margin-top: 0;
        margin-left: 2.5rem;
        width: 32%;
        flex-shrink: 0;
    }

    .pic-wall__text-box-image-container {
        position: relative;
        padding-top: 100%;
    }

        .pic-wall__text-box-image-container img {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
}

@media only screen and (orientation: landscape) and (min-width: 1440px) {
    /*.pic-wall__container {
      background: lightblue;
  } /*debug */

    .pic-wall__control-buttons {
        top: 1.85rem;
        right: calc(35% + 64px - 20px);
    }

        .pic-wall__control-buttons button {
            padding: 0;
        }

    .pic-wall__text-box-instance {
        padding: 2.85rem 4rem 3.5rem;
        display: flex;
    }

    .pic-wall__text-box-message {
        font-size: 1.125rem;
    }

    .pic-wall__text-box-name {
        font-size: 1.125rem;
    }

    .pic-wall__text-box-image {
        width: 35%;
    }
}


@media only screen and (orientation: landscape) and (max-aspect-ratio: 4/3) {
    /*.pic-wall__container {
      background: purple;
  } /*debug */

    :root {
        --timer-progress-width: 6px;
    }

    .pic-wall {
        padding-top: calc(100% / 7 * 5);
    }

    .pic-wall__text-box {
        top: calc(100% / 5);
        left: calc(100% / 7);
        width: calc(100% / 7 * 5);
        height: calc(100% / 5 * 3);
    }

    .pic-wall__control-buttons button {
        padding: 0;
    }

    .pic-wall__text-box-instance {
        padding: 8rem 3.5rem;
    }

    .pic-wall__picture {
        width: calc(100% / 7);
    }

        .pic-wall__picture:nth-child(20n+2) {
            top: 0;
            left: 0;
        }

        .pic-wall__picture:nth-child(20n+3) {
            top: 0;
            left: calc(100% / 7);
        }

        .pic-wall__picture:nth-child(20n+4) {
            top: 0;
            left: calc(100% / 7 * 2);
        }

        .pic-wall__picture:nth-child(20n+5) {
            top: 0%;
            left: calc(100% / 7 * 3);
        }

        .pic-wall__picture:nth-child(20n+6) {
            top: 0;
            left: calc(100% / 7 * 4);
        }

        .pic-wall__picture:nth-child(20n+7) {
            top: 0;
            left: calc(100% / 7 * 5);
        }

        .pic-wall__picture:nth-child(20n+8) {
            top: 0;
            left: calc(100% / 7 * 6);
        }

        .pic-wall__picture:nth-child(20n+9) {
            top: calc(100% / 5);
            left: calc(100% / 7 * 6);
        }

        .pic-wall__picture:nth-child(20n+10) {
            top: calc(100% / 5 * 2);
            left: calc(100% / 7 * 6);
        }

        .pic-wall__picture:nth-child(20n+11) {
            top: calc(100% / 5 * 3);
            left: calc(100% / 7 * 6);
        }

        .pic-wall__picture:nth-child(20n+12) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7 * 6);
        }

        .pic-wall__picture:nth-child(20n+13) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7 * 5);
        }

        .pic-wall__picture:nth-child(20n+14) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7 * 4);
        }

        .pic-wall__picture:nth-child(20n+15) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7 * 3);
        }

        .pic-wall__picture:nth-child(20n+16) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7 * 2);
        }

        .pic-wall__picture:nth-child(20n+17) {
            top: calc(100% / 5 * 4);
            left: calc(100% / 7);
        }

        .pic-wall__picture:nth-child(20n+18) {
            top: calc(100% / 5 * 4);
            left: 0;
        }

        .pic-wall__picture:nth-child(20n+19) {
            top: calc(100% / 5 * 3);
            left: 0;
        }

        .pic-wall__picture:nth-child(20n+20) {
            top: calc(100% / 5 * 2);
            left: 0;
        }

        .pic-wall__picture:nth-child(20n+21) {
            top: calc(100% / 5);
            left: 0;
        }

        .pic-wall__picture:nth-child(n+2):nth-child(-n+21) {
            z-index: 1;
        }

        .pic-wall__picture:nth-child(n+22):nth-child(-n+27) {
            z-index: 0;
        }

    .pic-wall__control-buttons {
        top: 1rem;
        right: calc(260px + 64px);
    }

        .pic-wall__control-buttons button {
            padding: .125rem;
        }

    .pic-wall__text-box-instance {
        padding: 2rem 2.85rem;
        display: flex;
    }

    .pic-wall__text-box-hashtags {
        flex-direction: row;
        margin-bottom: 1rem;
    }

        .pic-wall__text-box-hashtags a {
            font-size: 1rem;
        }

    .pic-wall__text-box-message {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .pic-wall__text-box-content-bottom {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }

    .pic-wall__text-box-name {
        font-size: 1.125rem;
        line-height: 1.375rem;
        margin-bottom: 0;
    }

        .pic-wall__text-box-name span {
            display: inline-block;
            width: 100%;
        }

    .pic-wall__text-box-read-more {
        font-size: 0.875rem;
    }

    .pic-wall__text-box-image {
        display: block;
        margin-top: 1.125rem;
        margin-left: 3.5rem;
        width: 260px;
        flex-shrink: 0;
    }

    .pic-wall__text-box-image-container {
        position: relative;
        padding-top: 100%;
    }

        .pic-wall__text-box-image-container img {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
}
/*==== End of TEMPLATES ====*/