.feature .wp-block-media-text__media {
    display: block;
}

.wp-block-cover.events .wp-block-cover__inner-container {
    display: flex;
    width: 100%;
    gap: 2.25rem;

}

.wp-block-cover {
    text-align: left;
}

.wp-block-cover h1 {
    position: relative;
}

.wp-block-cover.imgright {
    justify-content: flex-start;
}

.wp-block-cover.imgright .wp-block-cover__inner-container {
    max-width: 70%;
    padding: 0 clamp(2rem, -0.70109rem + 11.373vw, 9.25rem);
}

.goc-shop {
    min-height: unset;

    .wp-block-cover__background {
        &::before,
        &::after {
            position: absolute;
            z-index: 1;
            bottom: 0;
            content: "";
            background-repeat: no-repeat;
            background-size: contain;
        }

        &::before {
            top: 1rem;
            left: 0;
            width: 28vw;
            background-image: url("src/goc-shop.png?v=3");
            background-position: bottom right;
        }

        &::after {
            top: 0;
            right: 0;
            width: 20vw;
            background-image: url("src/rainbow-mask.png");
            background-position: bottom right;
        }
    }

    .wp-block-cover__inner-container {
        margin-right: auto;
        margin-left: 30vw;
    }
}

.keypoints {
    .scroll-container {
        width: 100%;
        margin: 0;
        padding: 5em 0;
    }

    .discs > div {
        flex: 1 0 auto;
        width: clamp(15rem, 23%, 24rem);
    }
}

.gallery .gallery-item {
    flex: 1 1 25%;
    max-width: 33%;
    text-align: center;
}

.screen-small {
    display: none;
}

.screen-large {
    display: block;
}

.wp-block-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;

    .date,
    .groups {
        grid-column: 1;
    }

    .date {
        align-self: flex-end;
    }

    .groups {
        align-self: flex-start;
    }

    .user {
        grid-row-end: span 2;
        justify-self: flex-end;
    }
}


#groups_map {
    position: relative;
    left: calc(50% - 50vw);
    display: block;
    overflow: hidden;
    width: 100vw;
    aspect-ratio: 487 / 209;

    .infobox {
        position: absolute;
        z-index: 2;
        top: 10%;
        left: 10%;
        width: 40%;
    }

    .map {
        position: relative;
        top: -45%;
        left: 25vw;
        width: 51vw;
        transition: all 1s ease;
    }

    & svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .scotland {
        top: 0;
        left: 40vw;
        width: 35vw;
    }

    & g {
        cursor: pointer;
    }

    & path {
        stroke: var(--colour-white);
        stroke-width: 0.3px;
    }

    & g:hover path {
        fill: var(--colour-orange);
    }
}

.scroll-container {
    padding-bottom: 0;
}

.scroll-more {
    bottom: calc(50% - 1.5rem);
}