/* ------------------------------------ Patterns Content ------------------------------------ */
.patterns-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--color-primary-900);
}

.patterns-wrap > * {
    display: inline-block;
    line-height: normal;
    height: 300px;
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 0;
}

.patterns-row-container {
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative;
    overflow: hidden;
    border: 5px solid var(--color-primary-900);
    border-radius: 10px;
}

.patterns-row-label {
    position: absolute;
    padding: .6em 1.2em;
    top: 0;
    left: 0;
    z-index: 15;
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-500);
    text-align: left;
    line-height: normal;
    color: var(--color-secondary-200);
    text-shadow: 0 0 2px #000;
    background-image: linear-gradient(130deg, var(--color-primary-900) 3%, 42%, rgba(var(--color-primary-800-rgb), 0.9));
    border-right: 1.5px solid rgba(255, 255, 255, .3);
    border-bottom: 1.5px solid rgba(255, 255, 255, .3);
    border-radius: 0 0 8px 0;
}
.patterns-row-label a {
    color: unset;
    text-underline-offset: .18em;
    text-decoration-color: rgba(var(--color-secondary-200-rgb), 0.4);
}

@media only screen and (max-width:768px) {
    .patterns-wrap > * {
        flex-basis: 100%;
    }
    .patterns-row-label {
        font-size: var(--fs-400)
    }
}

.pattern-info {
    margin-top: var(--size-300);
    padding: var(--size-600) var(--size-400) var(--size-700);
    height: unset;
    flex-basis: 100%;
    background-color: var(--color-primary-800);
    background-image: linear-gradient(0deg, rgb(10, 98, 101), 4px , var(--color-primary-800) 30px) ;
    border: 5px solid var(--color-primary-900);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

.patterns-wrap:first-of-type .pattern-info {
    margin-top:0;
    border-width: 0 0 5px 0;
}

.pattern-info-heading {
    margin-block: 1rem;
    font-size: 1.5em;
    font-family: var(--ff-body);
    line-height: normal;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--color-primary-300);
}

.pattern-info p {
    max-width: 768px;
    margin: 0 auto 1rem;
    color:var(--color-primary-100);
    line-height: 1.25em;
}


/* background image proportions must be pixel perfect or there will be a gap in the repeat pattern */
.haeckel01-container {
    background-image: url("/public/img/patterns/haeckel_pattern_01_38378a.svg");
    background-size: 300px;
}

.scales-container {
    position:relative;
    line-height: 0;
    background-image: url("/public/img/patterns/dragon_scale.png");
    background-size: 50px 50px;
}

.yott_green-container {
    background-image: url("/public/img/patterns/yott_green.png");
    background-color: var(--color-primary-300);
    background-size: 240px 240px;
}

.yott_cmy-container {
    background-image: url("/public/img/patterns/yott_cmy.png");
    background-color: var(--color-primary-300);
    background-size: 240px 240px;
}

.diamonds_01-container {
    background-image: url("/public/img/patterns/diamonds_01.png");
    background-color: var(--color-primary-300);
    background-size: 120px 90px;
}

.diamonds_double_01-container {
    background-image: url("/public/img/patterns/diamonds_double_01.png");
    background-color: var(--color-primary-300);
    background-size: 120px 160px;
}

.iso_check-container {
    position: relative;
    background-image: url("/public/img/patterns/isographic_pattern_y_red_120x70.svg");
    background-color: var(--color-primary-300);
    background-blend-mode: normal;
}

.iso_check-container img {
    height: 100%;
}

.iso_check-overlay-1 {
    position:absolute;
    top:0;
    left: 0;
    height:100%;
    width: 100%;
    background-image: url("/public/img/patterns/isographic_pattern_y_green_120x70.svg");
    mix-blend-mode: multiply;
}

.lair-01-container {
    position:relative;
    line-height: 0;
    background-image: url("/public/img/patterns/lair_background_01.svg");
    background-size: 216px;
}
.lair-01-container::after {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/public/img/patterns/lair_overlay_01.svg");
    background-size: 216px;
    mix-blend-mode: difference;
    opacity: .87;
}

.knit-container {
    position:relative;
    line-height: 0;
    background-image: url("/public/img/patterns/knit_knit.png");
    background-color: #112552;
    background-size: 27px 36px;
}

.knit-02-container {
    position:relative;
    line-height: 0;
    background-image: url("/public/img/patterns/knit_knit_02.png");
    background-color: #4e0c54;
    background-size: 26px 36px;
}
.waves-sq-container {
    position:relative;
    line-height: 0;
    background-image: url("/public/img/patterns/spectrum_fractal-waves.png");
    background-color: #09165c;
    background-size: 300px 100px;
}

/* ILLUSTRATED PATTERNS */
.illu-pattern-container {
    position: relative;
    background-color: rgb(168, 233, 233);
    transition: .6s;
}

.illu-pattern-container:hover,
.illu-pattern-container:active {
    background-color: rgb(198, 246, 246);
}

.frog-pattern-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("/public/img/patterns/havoc_pattern_01.jpg");
    background-size: 300px;
    mix-blend-mode: multiply;
}

.bear-pattern-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("/public/img/patterns/havoc_pattern_02.jpg");
    background-size: 300px;
    mix-blend-mode: multiply;
}

.zag-pattern-wrap {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-image: url("/public/img/patterns/havoc_pattern_03.jpg");
    background-size: 300px;
    mix-blend-mode: multiply;
}


/* interactive patterns ------------------------------ */

.geometric_pattern_01_container {
    background-color: #570d43;
    background-image: linear-gradient(to right, #570d43, #ae1e4b);
}
.geometric_pattern_01_container::before {
    content: "";
    position: absolute;
    top:calc(50% - 35px);
    left: 0;
    width: 100%;
    height: 70px;
    border-top: 2px solid #570d43;
    border-bottom: 2px solid #ae1e4b;
    background-image: url("/public/img/patterns/geometric_patterns_01_pattern_01.png");
    background-repeat: repeat-x;
    background-color: var(--color-primary-300);
    background-position-x: 0;
    transition:1s;
}
.geometric_pattern_01_container:hover::before,
.geometric_pattern_01_container:active::before {
    background-position-x: 35px;
    border-top: 2px solid #ae1e4b;
    border-bottom: 2px solid #570d43;
}

.geometric_pattern_02 {
    --padding-width: 20px;
    position: relative;
    height: 100%;
    width: 100%;
    padding: var(--padding-width);
    background-color: #570d43;
    background-image: linear-gradient(to right, #570d43 65%, 90%, #ae1e4b );
    border-top: 2px solid #570d43;
    border-bottom: 2px solid #570d43;
    border-right: unset;
    border-left: unset;
}
.geometric_pattern_02 div {
    transition: 1s;
    box-shadow: inset 0 0 3px 2px #0006;
}
.geometric_pattern_02 div:hover,
.geometric_pattern_02 div:active {
    box-shadow: inset 0 0 7px 5px #0006;
    transform: scale(97%);
}

.oval-hover-container iframe {
    width: 100%;
    height: 100%;
}

.color_box_nest {
    position: absolute;
    top: var(--padding-width);
    right:var(--padding-width);
    width: calc(66% - var(--padding-width) * 2);
    height: calc(100% - var(--padding-width) * 2);
    padding: var(--padding-width);
    background-color: #23c2bf;
    background-image: linear-gradient(to right, #23c2bf, #1a3a6b);
}

.color_box_nest > div {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--padding-width);
    background-color: #fcb449;
    background-image: linear-gradient(to right, #fcb449, #d66320);
}
.color_box_nest > div > div{
    content: "";
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #570d43;
    background-image: linear-gradient(to right, #570d43, #ae1e4b);
}