.block--resources {
    // border-top: 1px dashed $border-color;
}

.resources {
}

.resources-title,
.sponsors-title {
    font-size: $medium-font;
    @include medium-large {
        @include flex-center;
        justify-content: space-between;
    }
    margin-bottom: $spacing/2;
    h2 {
        margin: 0;
    }
}
.resources-sponsor {
    color: $lighter-text-color;
    @include secondary-font;
    font-size: $small-font;
    img {
        display: inline-block;
        height: 20px;
        vertical-align: middle;
        margin-right: 5px;
    }
}
.resources-list {
    @include large {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: $spacing * 2;
    }
}
.sponsors-list {
    margin-bottom: $spacing;
}
.resource {
    // border: 1px solid $border-color;
    // border-radius: 3px;
    margin-bottom: $spacing;
    // padding: $spacing $spacing;
    @include medium-large {
        display: flex;
    }
}
.resource-image {
    @include crosshatchBg;
    @include small {
        width: 60px;
        float: right;
        margin: 0 0 $spacing $spacing;
    }
    @include medium-large {
        width: 160px;
        margin-right: $spacing;
    }
    div {
        background: white;
        position: relative;
        z-index: 10;
        border: 2px solid $border-color;
    }
    a {
        display: block;
        width: 100%;
        padding-bottom: 90%;
        height: 0;
        background-position: center center;
        background-size: cover;
    }
    img,
    svg {
        display: block;
        width: 100%;
        border: 3px solid white;
    }
}
.resource-contents {
    flex: 1;
}
.resource-title {
    margin-bottom: 0;
}
.sponsor-title {
    font-size: $large-font;
}
.resource-author {
    margin-bottom: $spacing/4;
}
.resource-description {
    font-size: $smallish-font;
}
.sponsor-description {
    p {
        margin-bottom: 0;
    }
}
.resource-play {
    @include small {
        display: none;
    }
    margin-left: $spacing/2;
    a {
        display: block;
        height: 70px;
        width: 70px;
    }
    svg {
        width: 100%;
        fill: $grey;
    }
    a:hover svg {
        fill: $secondary-color;
    }
}
.resources-sponsored {
    color: $lighter-text-color;
    font-size: $smaller-font;
    text-align: center;
    @include secondary-font;
}
