Content Simple Text And Image Variations
BTEC Level 3 International
SUBSIDIARY diploma
Vocational qualifications in Esports.
Choosing the most suitable size of qualification will depend on the learner’s broader programme of study.
For example, a learner who wishes to focus solely on esports enterprise or coaching may take the Diploma or Extended Diploma, while a learner who selects a smaller qualification, such as the Certificate or Subsidiary Diploma, may choose to combine it with qualifications from other sectors, in order to support their desired progression.
Smaller qualifications are also suitable for learners who are in employment and studying part time.
Qualification structures have been designed to enable a learner who starts with the smallest qualification to progress easily to the larger qualifications.
The BTEC Level 3 International qualifications in Esports are designed for learners in the 16 to 19 age group, who wish to pursue a career in esports via higher education to access graduate entry employment with businesses, and those who are looking to progress into employment.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-simple-text-image-variations {
&.image-text {
.row {
@include bp($md) {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
}
.heading,
.content-container {
color: var( --text-color );
}
.heading {
@include fluid-type(32, 90);
@include margin-bottom( rem-calc(48) );
}
.text-col {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.image-col {
position: relative;
@include margin-top( rem-calc(64) );
@include bp($md) {
margin-top: 0;
}
iframe,
video {
width: 100%;
aspect-ratio: 16/9;
position: sticky;
top: 2rem;
}
> picture {
height: 100%;
max-height: rem-calc(400);
position: sticky;
top: 2rem;
img {
height: 100%;
object-fit: cover;
}
}
&.cards {
.post-card {
background: $white;
max-width: rem-calc(447);
@include bp($md) {
position: absolute;
}
&:first-of-type {
@include bp($md) {
top: rfs-fluid-value( rem-calc(0) );
left: rfs-fluid-value( rem-calc(0) );
}
@include bp($lg) {
top: rfs-fluid-value( rem-calc(24) );
left: rfs-fluid-value( rem-calc(-48) );
}
}
&:last-of-type:not(:first-of-type) {
@include margin-top( rem-calc(24) );
@include bp($md) {
margin-top: 0;
bottom: rfs-fluid-value( rem-calc(0) );
right: rfs-fluid-value( rem-calc(0) );
}
@include bp($lg) {
bottom: rfs-fluid-value( rem-calc(-24) );
right: rfs-fluid-value( rem-calc(32) );
}
}
}
}
}
&__logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
background-color: $white;
@include padding( rem-calc(8 12) );
picture {
display: flex;
flex-direction: column;
}
&--0 {
width: rfs-fluid-value(rem-calc(276));
aspect-ratio: 276/166;
top: rem-calc(16);
left: rem-calc(32);
@include bp($md) {
top: rem-calc(-24);
left: rem-calc(-12);
}
@include bp($lg) {
top: rem-calc(-24);
left: rem-calc(-24);
}
}
&--1 {
width: rfs-fluid-value(rem-calc(204));
aspect-ratio: 204/140;
top: rem-calc(16);
right: rem-calc(-8);
@include bp($md) {
top: rem-calc(32);
right: rem-calc(-12);
}
@include bp($lg) {
top: rem-calc(90);
right: rem-calc(-24);
}
}
&--2 {
width: rfs-fluid-value(rem-calc(262));
aspect-ratio: 1/1;
bottom: rem-calc(-16);
left: rem-calc(32);
@include bp($md) {
bottom: rem-calc(-32);
left: rem-calc(32);
}
@include bp($lg) {
bottom: rem-calc(-32);
left: 5%;
}
}
&--3 {
width: rfs-fluid-value(rem-calc(198));
aspect-ratio: 198/114;
bottom: rem-calc(32);
right: rem-calc(48);
@include bp($md) {
bottom: rem-calc(24);
right: rem-calc(0);
}
@include bp($lg) {
bottom: rem-calc(32);
left: 50%;
right: auto;
}
}
}
&__stat {
--text-color: #{$primary};
&.theme--dark {
--text-color: #{$white};
}
max-width: rem-calc(180);
display: flex;
flex-direction: column;
@include padding( rem-calc(16 42 42) );
position: absolute;
@include bp($md) {
max-width: rem-calc(200);
}
@include bp($lg) {
max-width: rem-calc(230);
}
&:not([class^=bg--]) {
// background-color: $grey;
}
&:first-of-type {
top: rem-calc(16);
left: rem-calc(-4);
@include bp($md) {
top: rem-calc(-24);
left: rem-calc(32);
}
.image-text & {
right: rem-calc(-4);
left: auto;
@include bp($lg) {
top: rem-calc(32);
right: rem-calc(-32);
}
}
}
&:last-of-type:not(:first-of-type) {
right: rem-calc(-16);
bottom: rem-calc(-32);
.image-text & {
right: auto;
left: rem-calc(40);
}
}
.stat,
.text {
color: var( --text-color );
line-height: 1.2;
}
.stat {
@include fluid-type(32, 100);
font-weight: 700;
}
.text {
@include fluid-type(14, 16);
text-transform: uppercase;
font-weight: 800;
opacity: 0.5;
}
}
}
Animation: