/* ===================================== */
/* =           ABOUT ME BOX            = */
/* ===================================== */
.me-box-right, .me-box-left {
    display: grid;
    grid-template-rows: auto;
    gap: 0px 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "me-box-description me-box-picture";
    justify-content: center;
    align-content: center;
    justify-items: start;
    align-items: start;
    /* width: 100%; 
    height: 100%;  */
    /* Dimensions */
    width: calc(100% - 20% - 20%);
    height: auto;
    /* Padding */
    margin: 20px 0px;
    padding: 0;
    /* padding-top: 10px; */
    /* Colour */
    background-color: var(--bg-colour-1);
    /* Shadow */
    box-shadow: -15px 15px 16px 0px rgba(138, 131, 124, 0.23);
    position: relative;
}

.me-box-right {
    /* grid-template-columns: 1fr 1.5fr; */
    grid-template-areas:
        "me-box-description me-box-picture";
}
.me-box-left {
    /* grid-template-columns: 1.5fr 1fr; */
    grid-template-areas:
        "me-box-picture me-box-description";
}

/* Description */
.me-box-description {
    grid-area: me-box-description;
    /* Alignment */
    justify-self: centre;
    align-self: center;
    /* Padding */
    padding: 10px 10px;
    /* Font */
    font-family: Figtree-Light;
    font-size: 17px;
    line-height: 1.8em;
    letter-spacing: 0px;
}

.me-box-description h1 {
    font-family: Poppins-Semi-Bold;
    font-size: 56px;
    text-align: start;
    padding-bottom: 20px;
    line-height: 1em;
}

.me-box-description p {
    font-family: Figtree-Light;
    font-size: 17px;
    text-align: start;
    line-height: 1.8em;
}

/* List format in description */
.me-box-description ul {
    margin: 0;
    /* Remove extra margin */
    padding-left: 20px;
    /* Indent the list slightly */
    list-style-type: disc;
    /* Standard bullet points */
}

.me-box-description li {
    font-family: Figtree-Light;
    font-size: 17px;
    /* Regular text size */
    line-height: 1.8em;
    letter-spacing: 0px;
}

/* ===================================== */
/* =           IMAGE CAROUSEL          = */
/* ===================================== */
/* Center the carousel */
.me-box-picture {
    grid-area: me-box-picture;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Carousel container */
.carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Image container */
.carousel-images {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    position: relative;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: black;
}

/* Caption sits flush with bottom */
.carousel-caption {
    position: static;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
}

/* Navigation buttons */
.carousel-button-prev, .carousel-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button-prev {
    left: 10px;
}

.carousel-button-next {
    right: 10px;
}

/* ======================================================== */
/* =                    MOBILE STYLING                    = */
/* ======================================================== */
@media (max-width: 768px) {
    /* ===================================== */
    /* =           ABOUT ME BOX            = */
    /* ===================================== */
    .me-box-right, .me-box-left {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        margin: 0;
        padding: 0;
        width: 100%;
        margin: 20px 0px;
        /* gap: 20px 0px; */
    }

    .me-box-right {
        grid-template-areas:
            "me-box-description"
            "me-box-picture";
    }
    .me-box-left {
        grid-template-areas:
            "me-box-picture"
            "me-box-description"; 
    }
}