.artefact-wrapper {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
}

.artefact-video {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.artefact-video iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.artefact-video-grid {
    border-radius: 8px;
    background: var(--awb-color5);
}

.artefact-video-content {
    padding: 20px;
    color: var(--awb-color2);
}

.artefact-content-left {
    float: left;
    font-family: var(--body_typography-font-family);
	font-size:var(--body_typography-font-size);
	font-weight:var(--body_typography-font-weight);
  	font-style: var(--body_typography-font-style);
    width:258px;
}

.artefact-content-right {
    float: right;
    padding-top:16px;
}

.artefact-explanation{
    text-align:center;
    margin:20px 0;
    color:var(--awb-color2);
}

.artefact-filter {
    margin: 20px 40px;
}
.artefact-filter-text{
    display:inline-block;
    font-size:20px;
    color:var(--awb-color2);
    font-weight:bold;
}

.artefact-filter span {
    display: inline-block;
    background: var(--awb-color1);
    color: var(--awb-color2);
    padding: 5px 20px;
    margin: 10px 5px;
    border-radius:10px;
    border:2px solid var(--awb-color2);
    font-family: var(--body_typography-font-family);
    font-size:14px;
}
.artefact-filter span:hover,
.artefact-filter span.selected {
    background: var(--awb-color2);
    color: var(--awb-color1);
}
#pagination-video{
    margin:80px auto;
	line-height:56px;
}
#pagination-video .page-numbers{
    padding:10px 15px;
    border:2px solid #00000045;
    border-radius:10px;
    background: var(--awb-color1);
    font-weight:bold;
    color:var(--awb-color2);
    font-family: var(--body_typography-font-family);
    font-size:var(--body_typography-font-size);
    margin:0px 5px;
}
#pagination-video .page-numbers:hover,
#pagination-video .current{
    background: var(--awb-color2);
    color:var(--awb-color1);
}

@media screen and (max-width: 640px) {
    #artefact-wrapper {
        grid-template-columns: auto;
    }
}

@media screen and (min-device-width: 641px) and (max-device-width: 1024px) {
    #artefact-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}