@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-game-elements {
&__game-info-col {
@include padding( rem-calc(60) );
}
&__game-info-row {
gap: rem-calc(24 0);
.game-thumbnail {
picture {
width: 100%;
display: flex;
flex-direction: column;
img {
width: 100%;
object-fit: cover;
}
}
}
.game-details {
display: flex;
flex-direction: column;
justify-content: flex-start;
.game-developer {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: rem-calc(16);
p {
text-transform: uppercase;
color: $black;
font-weight: 500;
letter-spacing: 1px;
@include font-size(rem-calc(10));
margin-bottom: 0;
}
img {
width: rem-calc(26);
height: rem-calc(26);
border-radius: 100%;
margin-right: rem-calc(10);
}
}
.game-title {
font-weight: 700;
margin-bottom: rem-calc(14);
}
.game-excerpt {
@include fluid-type(16, 18);
margin-bottom: 0;
}
.game-tags {
display: flex;
flex-direction: row;
align-items: center;
gap: rem-calc(8);
flex-wrap: wrap;
margin-top: rem-calc(24);
}
.game-tag,
.game-category {
@include fluid-type( 10, 10 );
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 0;
text-transform: uppercase;
padding: rem-calc(5 10);
border: 1px solid $primary;
font-weight: 500;
}
.game-tag {
border-color: $secondary;
}
}
}
.block-specification {
@include margin-top( rem-calc(36) );
&__card {
&-inner {
min-height: rem-calc( 180 );
@include padding( rem-calc(16 12) );
background-color: $white;
.spec--image {
max-height: rem-calc(56);
}
p {
&.spec--prefix {
@include fluid-type(10, 10);
}
&.spec--main {
@include fluid-type(44, 44);
}
&.spec--suffix {
@include fluid-type(14, 14);
}
}
}
}
}
}
Animation: