.topper
{
    display: flex;
    width: 100%;
    align-items: center;
    padding-left: 2rem;
    position: relative;
}

.three-d
{
    margin: 1.9rem auto;
    padding-left: unset;
}

.topper:has(.topper-image.float-right)
{
    flex-direction: row-reverse;
}

.topper:not(.three-d):has(.topper-image.float-left)
{
    background-image: url('/themes/contrib/arta_theme/images/honeycomb-pattern-right.png');
    background-position: top right;
    background-repeat: no-repeat;
    padding-left: unset;
}

.topper-image
{
    align-self: stretch;
    flex: 0 0 58.333%;
}

.topper-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.three-d .topper-image img
{
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}

.topper-image.float-right,
.topper-image.float-left
{
    float: unset;
}

.topper:not(.three-d) .topper-image.float-right
{
    padding-left: 2.7rem;
}

.three-d:has(.topper-image.float-right) .topper-copy
{
    margin-right: -5%;
}

.three-d:has(.topper-image.float-left) .topper-copy
{
    margin-left: -5%;
}

.topper:not(.three-d):has(.arta-white)
{
    background-color: var(--gt-white);
}

.topper-copy
{
    position: relative;
    flex: 0 0 41.66666667%;
    padding: 3rem;
}

.three-d .topper-copy
{
    z-index: 1;
    border: 2px solid var(--gt-drk-gold);
    padding: 6rem 4rem;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-basis: 40%;
    position: relative;
}

.three-d .topper-image
{
    flex: 1 0 60%;
}

.topper-copy p
{
    padding-top: 1rem;
    border-top: 2px solid;
}

.three-d .topper-copy p
{
    font-size: 1.6rem;
    font-weight: 300;
    padding-top: 0.5rem;
}

.topper-copy-title
{
    font-size: 3.5rem;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.1;
}

.three-d .topper-copy-title
{
    font-size: 3rem;
    padding-bottom: 0.5rem;
    line-height: 1;
}

.topper:not(.three-d)::after
{
    background-image: url('/themes/contrib/arta_theme/images/hc-pattern-overlay-sm.png');
    background-position: top left !important;
    background-repeat: no-repeat;
    z-index: 1;
    width: 150px;
    height: 123px;
    content: " ";
    position: absolute;
    background-size: contain;
}

.topper:not(.three-d):has(.topper-image.float-left)::after
{
    right: -40px;
    bottom: -10px;
}

.topper:not(.three-d):has(.topper-image.float-right)::after
{
    bottom: -50px;
    left: -60px;
}

.topper:not(.three-d) .topper-copy p
{
    margin-top: 1rem;
    width: 95%;
}

.three-d .topper-copy::after
{
    background-image: url('/themes/contrib/arta_theme/images/hc-pattern-overlay.png');
    background-repeat: no-repeat;
    z-index: 0;
    background-position: top;
    overflow: visible;
    content: " ";
    position: absolute;
    width: 258px;
    height: 220px;
    background-size: contain;
    bottom: -95px;
}

.three-d:has(.topper-image.float-left) .topper-copy::after
{
    right: -160px;
}

.three-d:has(.topper-image.float-right) .topper-copy::after
{
    left: -150px;
}

.topper-copy a.rbtn
{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
topper image field frontpage content type
*/
.field--name-field-fp-image,
.field--name-field-fp-image div
{
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1240px)
{
    .topper-copy::after
    {
        display: none;
    }
}

@media screen and (max-width:992px)
{
    .topper
    {
        align-items: unset;
        flex-direction: column !important;
        padding-left: unset;
    }

    .topper::after
    {
        display: none;
    }

    .topper .float-left,
    .topper .float-right
    {
        padding: unset !important;
    }

    .topper .topper-copy
    {
        padding: 1rem;
    }

    .three-d .topper-image img
    {
        border-bottom-left-radius: unset;
    }

    .three-d .topper-copy
    {
        padding: 1rem;
        border-top: unset;
        border-top-right-radius: unset;
    }

    .topper-copy
    {
        width: 100%;
    }

    .topper-copy-title,
    .three-d .topper-copy-title
    {
        font-size: 2.2rem;
    }

    .three-d:has(.topper-image.float-left) .topper-copy
    {
        margin-left: unset;
    }

    .three-d:has(.topper-image.float-right) .topper-copy
    {
        margin-right: unset;
    }

    .three-d .topper-image img
    {
        border-bottom-left-radius: unset;
    }
}