<div class="events-card ">
<div class="events-card__body">
<div class="events-card__details">
<div class="events-card__date">
</div>
<div class="events-card__label">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
</div>
</div>
.events-card {
position: relative;
transition: transform .35s, z-index .5s;
display: flex;
flex-direction: column;
flex: 1 1 0%; }
.events-card__body {
padding: 0 1.25rem 1.25rem 1.25rem;
flex: 0 1 100%; }
@media (min-width: 768px) {
.events-card__body {
text-align: center; } }
@media (min-width: 84.375em) {
.events-card__body {
padding: 0;
text-align: left; } }
.events-card__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start; }
@media (min-width: 84.375em) {
.events-card__row {
display: flex;
justify-content: center;
flex-wrap: nowrap;
border: none;
padding: 1.5rem;
background: transparent; } }
.events-card__row .fas,
.events-card__row .svg-inline--fa {
color: #737373;
padding-right: 0.325rem;
position: absolute;
margin-left: -25px; }
.bg--gold .events-card__row .fas, .bg--gold
.events-card__row .svg-inline--fa {
color: white; }
.events-card__row .svg-inline--fa {
width: 17px; }
.events-card__wrapper {
padding-bottom: 20px; }
@media (min-width: 980px) {
.events-card__wrapper {
padding-bottom: 0;
padding: 0 3rem;
display: flex; } }
.events-card__image {
overflow: hidden;
contain: paint; }
@media (min-width: 84.375em) {
.events-card__image {
height: auto;
margin-bottom: 0; } }
.events-card__image img {
align-self: start;
background: #fff; }
@media (min-width: 768px) {
.events-card__image img {
border-radius: 50%;
margin-top: 0;
height: auto;
padding: 8px;
border: 1px solid #737373; } }
.bg--gold .events-card__image img {
background: var(--brand-primary); }
@media (min-width: 768px) {
.bg--gold .events-card__image img {
border: 1px solid white; } }
.bg--gray .events-card__image img {
background: #f3f3f3; }
.bg--black .events-card__image img {
background: var(--brand-secondary);
border: 1px solid var(--brand-primary); }
.events-card .bttn {
padding: 0.325rem;
margin-top: 1.05rem;
background: transparent;
border: none;
font-size: .8rem; }
.bg--gold .events-card .bttn:after {
background-color: #fff; }
.bg--black .events-card .bttn,
.bg--gold .events-card .bttn,
.bg--gray .events-card .bttn {
padding: 0 0 .4rem 0; }
.bg--gray .events-card .bttn {
border-color: #737373; }
.bg--black .events-card .bttn {
color: var(--brand-primary); }
@media (min-width: 768px) {
.events-card__image {
display: block;
width: 70%;
margin: 0 auto; } }
@media (min-width: 84.375em) {
.events-card__image {
display: block;
width: auto;
flex: 0 1 30%;
margin-right: 15px;
margin-left: 0; } }
.events-card__label {
font-family: "Zilla Slab", "Zilla-fallback", serif;
font-size: 1.2rem;
font-weight: 300;
padding-left: 25px; }
.bg--black .events-card__label {
color: #f3f3f3; }
.events-card__title {
font-family: "Zilla Slab", "Zilla-fallback", serif;
font-size: 1.2rem;
font-weight: 700;
margin-top: 0.625rem;
margin-bottom: 0.325rem; }
.events-card__title a {
text-decoration: none;
color: var(--brand-secondary); }
.events-card__title a:hover, .events-card__title a:focus {
text-decoration: underline; }
.events-card__title a:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0; }
.bg--black .events-card__title a {
color: white; }
.events-card__date {
margin-bottom: 0.325rem;
font-family: "Zilla Slab", "Zilla-fallback", serif;
font-size: 1.2rem;
font-weight: 300;
font-style: italic; }
.bg--black .events-card__date {
color: var(--brand-primary); }
.events-card__text {
margin-top: 0.625rem;
margin-bottom: 0.625rem; }
.events-card__link {
text-decoration: none;
letter-spacing: .06rem;
text-transform: uppercase;
color: var(--brand-secondary);
font-weight: 300; }
.events-card__link:after {
content: "\f0da";
padding-left: 0.625rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: "Font Awesome 5 Free";
font-weight: 900; }
@media (min-width: 84.375em) {
.events-card__image + .events-card__body {
flex: 0 1 70%; } }
@import '../../assets/scss/variables';
@import '../../assets/scss/utilities';
.events-card {
position: relative;
transition: transform .35s, z-index .5s;
@include flexbox;
@include flex-direction($value: column);
@include flex($fg: 1, $fs: 1, $fb: 0%);
&__body {
padding: 0 $mobile-width-gutter $mobile-width-gutter $mobile-width-gutter;
flex: 0 1 100%;
@include breakpoint(sm) {
text-align: center;
}
@include breakpoint(page-container) {
padding: 0;
text-align: left;
}
}
&__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
@include breakpoint(page-container) {
display: flex;
justify-content: center;
flex-wrap: nowrap;
border: none;
padding: 1.5rem;
background: transparent;
}
.fas,
.svg-inline--fa {
color: $grey;
padding-right: $xsm;
position: absolute;
margin-left: -25px;
.bg--gold & {
color: white;
}
}
.svg-inline--fa {
width: 17px;
}
}
&__wrapper {
padding-bottom: 20px;
@include breakpoint(md) {
padding-bottom: 0;
padding: 0 3rem;
@include flexbox;
}
}
&__image {
overflow: hidden;
contain: paint;
@include breakpoint(page-container) {
height: auto;
margin-bottom: 0;
}
}
&__image img {
align-self: start;
@include breakpoint(sm) {
border-radius: 50%;
margin-top: 0;
height: auto;
padding: 8px;
border: 1px solid $grey;
}
background: #fff;
.bg--gold & {
@include breakpoint(sm) {
border: 1px solid white;
}
background: $primary;
}
.bg--gray & {
background: $light;
}
.bg--black & {
background: $secondary;
border: 1px solid $primary;
}
}
.bttn {
padding: $xsm;
margin-top: $md;
background: transparent;
border: none;
font-size: .8rem;
&:after {
.bg--gold & {
background-color: #fff;
}
}
.bg--black &,
.bg--gold &,
.bg--gray & {
padding: 0 0 .4rem 0;
}
.bg--gray & {
border-color: $grey;
}
.bg--black & {
color: $primary;
}
}
&__image {
@include breakpoint(sm) {
display: block;
width: 70%;
margin: 0 auto;
}
@include breakpoint(page-container) {
display: block;
width: auto;
flex: 0 1 30%;
margin-right: 15px;
margin-left: 0;
}
}
&__label {
font-family: $font-family-serif;
font-size: $h6-font-size;
font-weight: $font-weight-light;
padding-left: 25px;
.bg--black & {
color: $light;
}
}
&__title {
font-family: $font-family-serif;
font-size: $h6-font-size;
font-weight: $font-weight-bold;
@include margin($top: $sm, $bottom: $xsm);
a {
text-decoration: none;
color: $secondary;
&:hover,
&:focus {
text-decoration: underline;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.bg--black & {
color: white;
}
}
}
&__date {
margin-bottom: $xsm;
font-family: $font-family-serif;
font-size: 1.2rem;
font-weight: $font-weight-light;
font-style: italic;
.bg--black & {
color: $primary;
}
}
&__text {
@include margin($top: $sm, $bottom: $sm);
}
&__link {
text-decoration: none;
letter-spacing: .06rem;
text-transform: uppercase;
color: $secondary;
font-weight: $font-weight-light;
&:after {
content: "\f0da";
@include padding($left: $sm);
@include fas();
}
}
}
.events-card__image+.events-card__body {
@include breakpoint(page-container) {
flex: 0 1 70%;
}
}