:root {
    --accent-1: #ffa4bc;
    --accent-2: #f54094;
}
/* –——————————————————————————— IMAGE STYLING –——————————————————————————— */
.logo-box div {
    background-color: #f54094;
}
.logo-box img {
    height: 350px;
}
.row:not(:nth-child(1)) img {
    width: 100%;
    object-fit: cover;
}
.logo-specification {
    background-color: var(--accent-1);
    border-radius: 5px;
    padding: 30px 20px 40px 20px;
}
.logo-specification h2 {
    text-align: center;
}
.logo-specification img {
    width: 70% !important;
    margin: auto;
}
.mission img {
    max-width: 2000px;
    min-width: 0px;
    width: 100%;
}
.clothes img {
    object-fit: cover;
}
.clothes {
    display: grid !important;
    grid-template-columns: 1fr 2fr;
}
.merchandise {
    display: grid !important;
    grid-template-columns: 2fr 1fr;
}
.color-palette .color-first {
    width: 50%;
}
.color-palette > div > div {
    border-radius: 5px;
    position: relative;
}
.primary {
    color: #ffa4bc !important;
}
.secondary {
    color: #bc9ae3 !important;
}
.tertiary {
    color: #70c5f9 !important;
}
.color-palette .color-first > div:nth-child(1){
    background-color: #ffa4bc;
    height: 170px;
    width: 100%;
}
.color-palette .color-first > div:nth-child(2){
    background-color: #f54094;
    height: 300px;
}
.color-palette .color-first > div:nth-child(3){
    background-color: #fffaf5;
    height: 151px;
    border: 1.5px solid #f54094;
}
.color-palette .column:nth-child(2) {
    width: 25%;
}
.color-palette .column:nth-child(2) > div:nth-child(1){
    background-color: #bc9ae3;
    height: 319px;
}
.color-palette .column:nth-child(2) > div:nth-child(2){
    background-color: #ffd671;
    height: 320px;
}
.color-palette .column:last-child {
    width: 25%;
}
.color-palette .column:last-child > div:nth-child(1){
    background-color: #c3db6a;
    height: 208px;
}
.color-palette .column:last-child > div:nth-child(2){
    background-color: #70c5f9;
    height: 208px;
}
.color-palette .column:last-child > div:nth-child(3){
    background-color: #ff8545;
    height: 208px;
}
.color-image {
    width: 250px;
    height: 652px;
}
.color-image img {
    object-fit: cover;
    object-position: right;
    height: 100%;
}
/* –——————————————————————————— MISSION SCROLL –——————————————————————————— */
.mission-scroll {
    max-width: 1360;
    width: 100%;
    min-width: 0px;
    height: 100px;
    border-radius: 5px;
    background-repeat: repeat-x;
    background-size: 2555px 100px;
    margin: 0 auto;
    animation-name: scroll-mission;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    transition: .5s ease;
    margin-bottom: 15px;
}
@keyframes scroll-mission {
from {background-position: 0 0;}
to {background-position: -2555px 0;}
}
.mission-scroll {
    height: 100px;
    width: 100%;
    z-index: 2;
    background-color: var(--accent-2);
    background-image: url(american-girl/americangirl_scroll.jpg);
}
.mission-scroll ~ div {
    position: relative;
}
/* –——————————————————————————— MEDIA QUERIES –——————————————————————————— */
@media (max-width: 1000px) {
    .logo-specification img {
        width: 80% !important;
        margin: auto;
    }
    .color-image {
        display: none;
        position: absolute;
    }
    .color-image img {
        display: none;
        position: absolute;
    }
    .color-palette {
        display: flex;
        flex-direction: column !important;
    }
    .color-palette .color-first {
        width: 100%;
    }
    .color-palette .column:nth-child(2) {
        width: 100%;
    }
    .color-palette .column:last-child {
        width: 100%;
    }
    .color-palette .column > div {
        height: 200px !important;
    }
}
@media (max-width: 765px) {
    .logo-specification img {
        width: 90% !important;
        margin: auto;
    }
}
@media (max-width: 545px) {
    .logo-specification img {
        width: 100% !important;
        margin: auto;
    }
}