:root {
    --ccc-color-candy-cane-grey-01: #666;
	--ccc-color-airport-yellow-01: #fcff00;
}

.candy-cane-border-grey-and-yellow {
    border-top: 1em solid var(--ccc-color-candy-cane-grey-01);
    border-bottom: 1em solid var(--ccc-color-candy-cane-grey-01);
    border-image: repeating-linear-gradient(45deg,
            var(--ccc-color-candy-cane-grey-01),
            var(--ccc-color-candy-cane-grey-01) 1em,
            var(--ccc-color-airport-yellow-01) 1em,
            var(--ccc-color-airport-yellow-01) 2em) 40;
}

.header-luggage-tag {

    /* background */
    background-color: #ffffff33;

    /* texture */
    background-image:
        linear-gradient(to bottom, #f8f8f8cc, #f0f0f0cc),
        url(../assets/images/fiberglass-texture.jpg);

    background-blend-mode: screen;
    background-repeat: repeat;

    /* layout */
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    justify-content: space-between;
    /* justify-content: space-between */
    /* align-items: center; */

    padding: 1em 4em;

    /* font */
    color: #111;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;


    font-size: 0.25em;

    @media (min-width: 768px) {
        font-size: 0.5em;
    }

    @media (min-width: 1024px) {
        font-size: 0.5em;
    }

    @media (min-width: 1440px) {
        font-size: 0.75em;
    }

    @media (min-width: 1460px) and (max-width: 1560px) and (max-height: 1000px) {
        font-size: 0.75em;
    }

    @media (min-width: 2400px) {
        font-size: 1em;
    }

    @media (min-width: 3200px) {
        font-size: 1em;
    }






    /* gradient */


    /* shadow & inner glow */
    box-shadow: inset 0 0 0.5em 0.5em #ffffff,
    inset 0 0 1em #999999,
    0 0 0.5em black;


    /* sideways text */
    .left-edge-barcode,
    .right-edge-barcode {
        display: flex;
        flex-direction: column;
        /* justify-content: center;
        align-items: center; */
        gap: none;
        transform: rotate(-90deg);
        padding: 0;
        margin: 0;
    }

    /* sideways text */
    .right-edge-barcode {
        transform: rotate(90deg);
    }

    .barcode-01,
    .barcode-02 {
        font-family: "Libre Barcode 128", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 2em;
        padding: 0;
        margin: 0;
        transform: scaleY(4) translateY(1.1em);
    }

    .barcode-text-01,
    .barcode-text-02 {
        font-family: "Libre Barcode 128 Text", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 2em;
        padding: 0;
        margin: 0;
    }

    h2 {
        font-weight: 800;
        text-transform: uppercase;
        font-size: 4em;
        /* letter-spacing: -0.05em; */
        text-shadow:
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em,
            #fff 0 0 0.1em;
        transform: scaleY(2);
        padding: 0 0.5em;
    }

}