.collage {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 420px;
    margin-top: 20px;
}

.iconcontainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 40px;
    border-bottom: 0.5px solid black;
}

    .iconcontainer a {
        color: #0E6655;
        text-align: center;
    }

.zone1 {
    background-image: url('/images/ROG_Strix_G16.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

    .zone1:hover {
        opacity: 0.5;
    }

.zone2 {
    background-image: url('/images/Dell_XPS_14.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

    .zone2:hover {
        opacity: 0.5;
    }

.zone3 {
    background-image: url('/images/Legion_7i_Gen_10.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

    .zone3:hover {
        opacity: 0.5;
    }

.bookcontainer {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    height: 200px;
}

.zoneA {
    text-align: center;
    font-size: 37px;
    font-weight: bold;
    font-family: 'Monoton', cursive;
}

.zoneB {
    background-image: url('/images/Alienware_18_Area-51.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneC {
    background-image: url('/images/Asus_TUF_Gaming_T500.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneD {
    background-image: url('/images/ThinkPad_X9.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneE {
    background-image: url('/images/Yoga_Slim_7i.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.titletext {
    text-align: center;
    font-size: 28px;
    font-family: 'Aldrich', sans-serif;
    color: #16A085;
    border-bottom: 0.5px solid black;
}

.movieposter {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 465px;
}

.toyposter {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 315px;
}

.poster1 {
    background-image: url('/images/Alienware_18_Area-51.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.poster2 {
    background-image: url('/images/ROG_Zephyrus_G14.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.poster3 {
    background-image: url('/images/Legion_T5_30AGB10.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.toy1 {
    background-image: url('/images/MX_Master_4.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.toy2 {
    background-image: url('/images/Razer_Naga_V2_Pro.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.toy3 {
    background-image: url('/images/Razer_Ornata_V3.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.bookcontainer2 {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    height: 600px;
}
.zoneF {
    background-image: url('/images/ThinkCentre_M90t.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneG {
    background-image: url('/images/ThinkCentre_M70t.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneH {
    background-image: url('/images/ROG_G700.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneI {
    background-image: url('/images/MAG_Infinite_E1.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneJ {
    background-image: url('/images/MEG_Trident_X2_14th.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneK {
    background-image: url('/images/MPG_Infinite_Z3_X3D.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneL {
    background-image: url('/images/ZONE_VIBE_100.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneM {
    background-image: url('/images/Razer_Hammerhead_V3.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneN {
    background-image: url('/images/Razer_Cobra.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.zoneO {
    background-image: url('/images/Alto_Keys_K98M.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.bcbtn {
    font-family: 'Poppins', sans-serif;
    height: 45px;
    width: 130px;
    color: white;
    background-color: #0E6655;
    border: none;
    font-size: 15px;
    font-weight: bold;
}

.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@media only screen and (max-width: 300px) {
    .prev, .next, .text {
        font-size: 11px
    }
}

@media only screen and (max-width: 600px) {
    .iconcontainer, .titletext {
        font-size: 12px;
        width: auto;
        height: auto;
    }

        .iconcontainer i {
            font-size: 2rem;
        }

    .collage {
        width: auto;
        height: 160px;
    }

    .bookcontainer {
        width: auto;
        height: 100px;
    }

    .bcbtn {
        height: 20px;
        width: 70px;
        font-size: 8px;
    }

    .zoneA {
        width: auto;
        height: 250px;
        font-size: 15px;
    }

    .movieposter {
        height: 200px;
    }

    .toyposter {
        height: 130px;
    }

    .bookcontainer2 {
        height: 230px;
    }
}